:not(i):not(.fa):not(.fas):not(.far):not(.fab):not(.fal):not(.fad):not(.fat){font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif}:root{--glass-bg:rgba(255, 255, 255, 0.05);--glass-bg-hover:rgba(255, 77, 41, 0.15);--glass-bg-secondary:rgba(255, 255, 255, 0.08);--glass-border:rgba(255, 255, 255, 0.1);--glass-border-light:rgba(255, 255, 255, 0.05);--glass-blur:blur(20px) saturate(120%);--glass-blur-light:blur(8px) saturate(110%);--color-dark:#031024;--color-dark-accent:#051e3e;--color-dark-light:#0a1932;--color-primary:#FF4D29;--color-primary-light:rgba(255, 77, 41, 0.1);--color-primary-dark:#e64024;--color-secondary:#0055A4;--color-secondary-light:rgba(0, 85, 164, 0.1);--color-white:#FFFFFF;--color-light-gray:rgba(255, 255, 255, 0.7);--color-gray:rgba(255, 255, 255, 0.5);--color-dark-gray:rgba(255, 255, 255, 0.1);--color-success:#27AE60;--color-success-light:rgba(39, 174, 96, 0.15);--color-warning:#F39C12;--color-warning-light:rgba(243, 156, 18, 0.15);--color-error:#E74C3C;--color-error-light:rgba(231, 76, 60, 0.15);--color-info:#3498DB;--color-info-light:rgba(52, 152, 219, 0.15);--color-purple:#9B59B6;--color-purple-light:rgba(155, 89, 182, 0.15);--text-primary:rgba(255, 255, 255, 0.92);--text-secondary:rgba(255, 255, 255, 0.75);--font-primary:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;--font-mono:'Monaco','Courier New',monospace;--font-size-xs:0.75rem;--font-size-sm:0.875rem;--font-size-base:1rem;--font-size-md:1.125rem;--font-size-lg:1.25rem;--font-size-xl:1.5rem;--font-size-2xl:1.875rem;--font-size-3xl:2.25rem;--font-size-4xl:3rem;--font-size-5xl:3.75rem;--font-size-6xl:4.5rem;--space-xs:0.25rem;--space-sm:0.5rem;--space-md:0.75rem;--space-lg:1rem;--space-xl:1.5rem;--space-2xl:2rem;--space-3xl:3rem;--radius-xs:0.125rem;--radius-sm:0.25rem;--radius-md:0.5rem;--radius-lg:0.75rem;--radius-xl:1rem;--radius-2xl:1.5rem;--radius-full:9999px;--transition-fast:0.15s ease;--transition-normal:0.3s ease;--transition-slow:0.5s ease;--transition-bounce:0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);--shadow-xs:0 1px 2px rgba(0, 0, 0, 0.1);--shadow-sm:0 1px 3px rgba(0, 0, 0, 0.2);--shadow-md:0 4px 6px rgba(0, 0, 0, 0.3);--shadow-lg:0 10px 15px rgba(0, 0, 0, 0.3);--shadow-xl:0 20px 25px rgba(0, 0, 0, 0.4);--shadow-2xl:0 25px 50px rgba(0, 0, 0, 0.5);--shadow-fire:0 0 12px rgba(255, 77, 41, 0.3);--shadow-fire-lg:0 0 20px rgba(255, 77, 41, 0.4);--shadow-glow:0 0 30px rgba(255, 255, 255, 0.1);--z-behind:-1;--z-normal:0;--z-above:1;--z-sticky:10;--z-fixed:100;--z-overlay:1000;--z-modal:2000;--z-toast:3000;--z-tooltip:4000;--z-confetti:5000}.loading-spinner{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(3,16,36,.95);z-index:var(--z-modal);display:none;align-items:center;justify-content:center}.spinner{width:50px;height:50px;border:3px solid var(--color-dark-gray);border-top:3px solid var(--color-primary);border-radius:50%;animation:1s linear infinite spin}@keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}html{margin:0;padding:0;overflow-x:hidden}body{font-family:var(--font-primary);font-size:var(--font-size-base);line-height:1.6;color:rgba(255,255,255,.92);background:radial-gradient(ellipse at top left,#ff4d29 0,#05204b 25%,#031127 60%);background-attachment:fixed;overflow-x:hidden;min-height:100vh;margin:0;padding:0;opacity:0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;box-sizing:border-box;position:relative}body.page-ready{opacity:1;transition:opacity .2s ease-out}body::before{content:'';position:fixed;top:-200px;right:-200px;width:800px;height:800px;background:radial-gradient(circle,rgba(255,77,41,.15),transparent 60%);filter:blur(100px);z-index:1;pointer-events:none}@keyframes pulse{0%{opacity:.6;transform:scale(1)}100%{opacity:1;transform:scale(1.1)}}*,.main-content *,.main-content ::after,.main-content ::before,::after,::before{box-sizing:border-box;margin:0;padding:0}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:var(--color-dark-gray);border-radius:var(--radius-full)}::-webkit-scrollbar-thumb{background:var(--color-primary);border-radius:var(--radius-full);transition:background var(--transition-normal)}::-webkit-scrollbar-thumb:hover{background:var(--color-primary-dark)}::selection{background:var(--color-primary);color:var(--color-white)}.page-layout{display:grid;grid-template-columns:1fr;gap:var(--space-xl);max-width:1200px;margin:0 auto;padding:0 var(--space-lg);width:100%;box-sizing:border-box}.main-column{min-width:0;max-width:1200px;margin:0 auto;width:100%;box-sizing:border-box}.tool-container{width:100%;max-width:1400px;margin:0 auto;padding:0 var(--space-lg);box-sizing:border-box;position:relative}.tool-container .content-wrapper{padding:var(--space-xl) var(--space-lg) var(--space-lg)}.wide-container{width:100%;max-width:1400px;margin:0 auto;padding:0 var(--space-lg)}.wide-container .content-wrapper{padding:var(--space-xl) var(--space-lg) var(--space-lg)}.main-content{margin-top:80px;min-height:calc(100vh - 80px);padding:var(--space-md) 0;position:relative;background:radial-gradient(circle at 30% 30%,rgba(255,77,41,.06) 0,transparent 90%),radial-gradient(circle at 70% 70%,rgba(0,85,164,.08) 0,transparent 70%);width:100%;box-sizing:border-box}.hero{text-align:center;margin-bottom:var(--space-md);padding:var(--space-xs) 0}.hero-title{font-size:var(--font-size-xl);font-weight:900;line-height:1.2;margin-bottom:0;background:linear-gradient(135deg,var(--color-white) 0,var(--color-primary) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.hero-description{font-size:var(--font-size-base);color:var(--color-light-gray);max-width:600px;margin:0 auto;line-height:1.3;text-align:center}.compact-converter{margin-bottom:var(--space-xl)}.content-wrapper{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);border-radius:var(--radius-xl);padding:var(--space-2xl);position:relative;z-index:10;overflow:visible;transition:transform .3s cubic-bezier(.4, 0, .2, 1),box-shadow .3s cubic-bezier(.4, 0, .2, 1),border-color .3s cubic-bezier(.4, 0, .2, 1)}.content-wrapper::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--color-primary),var(--color-secondary),transparent)}.content-wrapper.cheat-wrapper,.content-wrapper.faq-wrapper,.content-wrapper.features-wrapper,.content-wrapper.stats-wrapper{margin-top:var(--space-3xl);margin-bottom:var(--space-3xl)}.compact-converter .content-wrapper{padding:var(--space-xl) var(--space-lg) var(--space-lg)}.analytics-wrapper{margin-top:var(--space-3xl);padding:var(--space-xl)}.analytics-wrapper::before{height:1px;background:linear-gradient(90deg,transparent,var(--color-primary),var(--color-secondary),transparent)}.cheat-wrapper{margin-top:var(--space-xl);padding:var(--space-xl);overflow:visible}.analytics-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-md)}.analytics-header h4{display:flex;align-items:center;gap:var(--space-sm);font-size:16px;font-weight:600;color:var(--text-primary);margin:0}.analytics-header i{color:var(--color-primary);font-size:16px}.reset-stats-btn{height:32px;display:inline-flex;align-items:center;gap:var(--space-xs);padding:0 var(--space-md);background:rgba(255,255,255,.12);border:1px solid var(--glass-border-light);border-radius:var(--radius-lg);color:var(--text-secondary);font-size:var(--font-size-xs);font-weight:600;cursor:pointer;transition:transform .3s cubic-bezier(.4, 0, .2, 1);text-transform:uppercase;letter-spacing:.5px}.reset-stats-btn i{color:var(--text-secondary);transition:transform .3s cubic-bezier(.4, 0, .2, 1)}.reset-stats-btn:hover{background:linear-gradient(135deg,var(--color-error) 0,var(--color-error) 100%);border-color:var(--color-error);color:var(--color-white);transform:translateY(-1px)}.reset-stats-btn:hover i{color:var(--color-white)}.analytics-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-lg)}.analytics-card{display:flex;align-items:center;gap:var(--space-md);padding:var(--space-lg);background:rgba(255,255,255,.12);border:1px solid var(--glass-border);border-radius:var(--radius-lg);transition:transform .3s cubic-bezier(.4, 0, .2, 1),box-shadow .3s cubic-bezier(.4, 0, .2, 1);cursor:pointer;transform:translateZ(0);-webkit-transform:translateZ(0)}.analytics-card:hover{background:rgba(255,77,41,.15);border-color:var(--color-primary);transform:translate3d(0,-2px,0) scale3d(1.01,1.01,1);will-change:transform}.analytics-icon{width:48px;height:48px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--color-primary) 0,var(--color-primary-dark) 100%);border-radius:var(--radius-md);color:var(--color-white);font-size:var(--font-size-lg);flex-shrink:0}.analytics-data{flex:1}.analytics-value{font-size:var(--font-size-lg);font-weight:700;color:var(--color-white);font-family:var(--font-primary);margin-bottom:4px;line-height:1.2}.analytics-label{font-size:var(--font-size-xs);color:var(--color-light-gray);font-weight:500;text-transform:uppercase;letter-spacing:.8px;opacity:.8}.usage-compact{display:flex;flex-direction:column;gap:var(--space-2xl,2rem)}.usage-steps-horizontal{display:flex;align-items:center;justify-content:center;gap:var(--space-lg,1.5rem);flex-wrap:nowrap;margin-bottom:var(--space-2xl,2rem)}.usage-step{display:flex;flex-direction:column;align-items:center;text-align:center;max-width:200px}.step-icon{position:relative;display:flex;align-items:center;justify-content:center;width:80px;height:80px;background:linear-gradient(135deg,var(--color-primary,#ff4d29),#ff6b47);border-radius:50%;margin-bottom:var(--space-md,1rem);transition:transform .3s}.step-icon:hover{transform:scale3d(1.05,1.05,1);will-change:transform}.step-icon i{font-size:1.5rem;color:#fff}.step-num{position:absolute;top:-8px;right:-8px;width:24px;height:24px;background:var(--color-dark,#031024);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:var(--font-size-sm, .875rem);font-weight:800;border:2px solid var(--color-primary,#ff4d29)}.usage-step h4{font-size:var(--font-size-lg, 1.25rem);font-weight:700;color:var(--text-primary,rgba(255,255,255,.92));margin-bottom:var(--space-sm,.5rem)}.usage-step p{font-size:var(--font-size-sm, .875rem);color:var(--text-secondary,rgba(255,255,255,.75));line-height:1.5}.step-arrow{color:var(--color-primary,#ff4d29);font-size:1.5rem;opacity:.7}.quick-features{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--space-lg,1.5rem)}.quick-feature{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-sm,.5rem);padding:var(--space-lg,1.5rem);background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);border-radius:12px;transition:transform .3s cubic-bezier(.4, 0, .2, 1),box-shadow .3s cubic-bezier(.4, 0, .2, 1),border-color .3s cubic-bezier(.4, 0, .2, 1);min-height:72px;text-align:center}.quick-feature:hover{background:rgba(255,77,41,.15);border-color:var(--color-primary);transform:translate3d(0,-2px,0) scale3d(1.01,1.01,1);will-change:transform}.quick-feature i{font-size:1.25rem;color:var(--color-primary,#ff4d29);flex-shrink:0}.quick-feature span{font-size:var(--font-size-sm, .875rem);color:var(--text-secondary,rgba(255,255,255,.75));font-weight:500}.features-section{margin-top:var(--space-3xl);margin-bottom:var(--space-2xl)}.section-header{text-align:center;margin-bottom:var(--space-2xl)}.section-header h2{font-size:var(--font-size-2xl);font-weight:800;color:var(--color-white);margin-bottom:var(--space-lg)}.section-header p{font-size:var(--font-size-md);color:var(--color-light-gray);max-width:600px;margin:0 auto}.features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-lg);margin-top:var(--space-2xl)}.feature-card{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);border-radius:var(--radius-xl);padding:var(--space-xl);text-align:center;transition:transform .3s cubic-bezier(.4, 0, .2, 1),border-color .3s cubic-bezier(.4, 0, .2, 1);position:relative;overflow:hidden}.feature-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--color-primary) 0,var(--color-secondary) 100%);transform:scaleX(0);transition:transform var(--transition-normal)}.feature-card:hover{background:rgba(255,77,41,.15);border-color:var(--color-primary);transform:translate3d(0,-2px,0) scale3d(1.01,1.01,1);will-change:transform}.feature-card:hover::before{transform:scaleX(1)}.feature-icon{width:64px;height:64px;background:linear-gradient(135deg,var(--color-primary) 0,var(--color-primary-dark) 100%);border-radius:var(--radius-lg);display:flex;align-items:center;justify-content:center;margin:0 auto var(--space-lg);font-size:var(--font-size-xl);color:var(--color-white);transition:transform .3s cubic-bezier(.4, 0, .2, 1)}.feature-card:hover .feature-icon{transform:scale(1.1) rotate(5deg)}.feature-card h3{font-size:var(--font-size-lg);font-weight:700;color:var(--color-white);margin-bottom:var(--space-md)}.feature-card p{color:var(--color-light-gray);line-height:1.6}.faq-section{margin-bottom:var(--space-3xl)}.faq-grid{display:grid;gap:var(--space-md);max-width:800px;margin:0 auto}.faq-item{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);border-radius:var(--radius-lg);overflow:hidden;transition:transform .3s cubic-bezier(.4, 0, .2, 1),box-shadow .3s cubic-bezier(.4, 0, .2, 1),border-color .3s cubic-bezier(.4, 0, .2, 1)}.faq-item:hover{background:rgba(255,77,41,.15);border-color:var(--color-primary);transform:translate3d(0,-2px,0) scale3d(1.01,1.01,1);will-change:transform}.faq-question{padding:var(--space-xl);background:rgba(255,255,255,.12);display:flex;justify-content:space-between;align-items:center;cursor:pointer;transition:transform .3s cubic-bezier(.4, 0, .2, 1);user-select:none}.faq-question:hover{background:rgba(255,77,41,.1)}.faq-question h3{font-size:var(--font-size-md);color:var(--color-white);font-weight:600;margin:0}.faq-question i{color:var(--color-primary);font-size:var(--font-size-sm);transition:transform var(--transition-normal)}.faq-item.active .faq-question i{transform:rotate(180deg)}.faq-answer{max-height:0;overflow:hidden;transition:max-height var(--transition-normal)}.faq-item.active .faq-answer{max-height:300px}.faq-answer-content{padding:0 var(--space-xl) var(--space-xl);display:flex;align-items:center;justify-content:flex-start}.faq-answer p{color:var(--color-light-gray);line-height:1.6;margin:0;width:100%}.mode-selector-row{margin-bottom:var(--space-lg);padding-bottom:var(--space-lg);border-bottom:1px solid var(--color-dark-gray);transition:margin-bottom .3s cubic-bezier(.4, 0, .2, 1),padding-bottom .3s cubic-bezier(.4, 0, .2, 1)}.mode-selector-row.collapsed{margin-bottom:var(--space-lg);padding-bottom:var(--space-sm)}.mode-header{display:flex;align-items:center;justify-content:space-between;gap:var(--space-md)}.mode-label{display:flex;align-items:center;gap:var(--space-sm);font-weight:600;color:var(--text-primary);font-size:14px;margin-bottom:0;margin-top:0}.mode-label i{color:var(--color-primary);font-size:14px}.mode-collapse-btn{width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius-lg);color:var(--text-secondary);cursor:pointer;transition:background-color .2s cubic-bezier(.4, 0, .2, 1),border-color .2s cubic-bezier(.4, 0, .2, 1),color .2s cubic-bezier(.4, 0, .2, 1),transform .2s cubic-bezier(.4, 0, .2, 1)}.mode-collapse-btn:hover{background:rgba(255,255,255,.08);border-color:var(--color-primary);color:var(--color-primary);transform:translateY(-1px)}.mode-collapse-btn i{font-size:var(--font-size-sm);transition:transform .3s cubic-bezier(.4, 0, .2, 1)}.mode-selector-row.collapsed .mode-collapse-btn i{transform:rotate(180deg)}.mode-collapsible-content{max-height:1000px;overflow:hidden;transition:max-height .4s cubic-bezier(.4, 0, .2, 1),opacity .3s cubic-bezier(.4, 0, .2, 1),margin-top .3s cubic-bezier(.4, 0, .2, 1);opacity:1;margin-top:var(--space-md)}.mode-selector-row.collapsed .mode-collapsible-content{max-height:0;opacity:0;margin-top:0}.mode-buttons-integrated{display:flex;flex-wrap:wrap;gap:12px;padding:8px;justify-content:center}.mode-btn-integrated{flex:1 1 200px;max-width:250px;min-width:200px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:12px;cursor:pointer;transition:background-color .3s cubic-bezier(.4, 0, .2, 1),border-color .3s cubic-bezier(.4, 0, .2, 1),transform .3s cubic-bezier(.4, 0, .2, 1);display:flex;align-items:center;gap:10px;color:#fff;position:relative;overflow:hidden}.mode-btn-integrated::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(180deg,#ff4d29,#ff6b47);transform:scaleY(0);transition:transform .3s cubic-bezier(.4, 0, .2, 1)}.mode-btn-integrated:hover{transform:translateX(4px);border-color:rgba(255,77,41,.4);background:rgba(255,77,41,.08)}.mode-btn-integrated:hover::before{transform:scaleY(1)}.mode-btn-integrated.active{background:rgba(25,111,61,.15);border-color:#196f3d}.mode-btn-integrated.active::before{transform:scaleY(1);background:linear-gradient(180deg,#196f3d,#228b22)}.mode-icon-integrated{width:36px;height:36px;background:linear-gradient(135deg,#ff4d29,#ff6b47);border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:18px;color:#fff;flex-shrink:0;transition:background .3s cubic-bezier(.4, 0, .2, 1)}.mode-btn-integrated.active .mode-icon-integrated{background:linear-gradient(135deg,#196f3d,#228b22)}.mode-content-integrated{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.mode-title-integrated{font-family:Inter,sans-serif;font-size:14px;font-weight:600;line-height:1.2;color:#fff;margin:0;transition:color .3s cubic-bezier(.4, 0, .2, 1)}.mode-desc-integrated{font-family:Inter,sans-serif;font-size:11px;line-height:1.2;color:rgba(255,255,255,.65);margin:0;white-space:nowrap;transition:color .3s cubic-bezier(.4, 0, .2, 1)}.color-mode-container{display:none}.color-mode-container.active{display:block}.global-toolbar{display:flex;gap:var(--space-md);margin-bottom:var(--space-xl);justify-content:flex-end}.toolbar-btn{padding:var(--space-md) var(--space-lg);background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:var(--radius-lg);color:var(--text-primary);font-weight:600;font-size:var(--font-size-sm);transition:background-color .3s cubic-bezier(.4, 0, .2, 1),border-color .3s cubic-bezier(.4, 0, .2, 1),color .3s cubic-bezier(.4, 0, .2, 1),transform .3s cubic-bezier(.4, 0, .2, 1);cursor:pointer;display:flex;align-items:center;gap:var(--space-sm)}.toolbar-btn:hover{background:var(--color-primary);border-color:var(--color-primary);color:#fff;transform:translate3d(0,-2px,0)}.picker-mode-chips{display:flex;gap:var(--space-sm);margin-bottom:0;background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:var(--radius-lg);padding:var(--space-xs);width:100%}.color-picker-container{position:relative;width:100%;max-width:440px;aspect-ratio:1;margin:0 auto var(--space-xl)}.picker-basic,.picker-pro{width:100%;height:100%}.hue-ring-container{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center;filter:drop-shadow(0 8px 32px rgba(0, 0, 0, .15))}#hueRing,#hueRingPro{width:100%;height:100%;cursor:crosshair;border-radius:50%;image-rendering:-webkit-optimize-contrast;image-rendering:crisp-edges;transition:filter .3s cubic-bezier(.4, 0, .2, 1)}.hue-ring-container:hover #hueRing,.hue-ring-container:hover #hueRingPro{filter:brightness(1.05) drop-shadow(0 0 8px rgba(255, 255, 255, .1))}.hue-ring-container.active #hueRing,.hue-ring-container.active #hueRingPro{filter:brightness(1.08) drop-shadow(0 0 12px rgba(255, 255, 255, .15))}.sl-square-container{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:48%;height:48%;border-radius:6px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.15),0 0 0 1px rgba(0,0,0,.2),0 4px 16px rgba(0,0,0,.25),0 -1px 2px rgba(255,255,255,.1) inset;transition:transform .3s cubic-bezier(.34, 1.56, .64, 1),box-shadow .3s cubic-bezier(.4, 0, .2, 1)}.hue-ring-container:hover .sl-square-container{box-shadow:inset 0 0 0 1px rgba(255,255,255,.25),0 0 0 1px rgba(0,0,0,.3),0 4px 20px rgba(0,0,0,.3),0 -1px 2px rgba(255,255,255,.15) inset,0 0 24px rgba(255,77,41,.1)}.hue-ring-container.dragging{cursor:grabbing}.hue-ring-container.dragging #hueRing,.hue-ring-container.dragging #hueRingPro{opacity:.95;transition:opacity .1s}.hue-ring-container.dragging .sl-square-container{transform:translate(-50%,-50%) scale(.995)}.sl-square-container::before{content:'';position:absolute;inset:-8px;border-radius:12px;background:radial-gradient(circle at center,transparent 0,transparent 60%,rgba(0,0,0,.03) 75%,rgba(0,0,0,.08) 100%);pointer-events:none;opacity:.6;transition:opacity .3s}.hue-ring-container:hover .sl-square-container::before{opacity:.3}.sl-square-container::after{content:'';position:absolute;inset:0;border-radius:5px;background:linear-gradient(135deg,rgba(255,255,255,.12) 0,transparent 40%,transparent 100%);pointer-events:none}#slSquare{width:100%;height:100%;cursor:crosshair;border-radius:5px;image-rendering:auto}@keyframes colorTransition{0%{opacity:.9}100%{opacity:1}}.sl-square-container.updating #slSquare{animation:.15s ease-out colorTransition}.sl-cursor{position:absolute;width:18px;height:18px;border:2.5px solid #fff;border-radius:50%;box-shadow:0 0 0 1.5px rgba(0,0,0,.4),0 2px 6px rgba(0,0,0,.3),0 0 0 4px rgba(255,255,255,.1);pointer-events:none;transform:translate(-50%,-50%);transition:width .15s cubic-bezier(.34, 1.56, .64, 1),height .15s cubic-bezier(.34, 1.56, .64, 1),border-width .15s;will-change:transform;transform-style:preserve-3d;backface-visibility:hidden}.sl-cursor.active{width:20px;height:20px;border-width:3px;box-shadow:0 0 0 1.5px rgba(0,0,0,.5),0 3px 8px rgba(0,0,0,.4),0 0 0 5px rgba(255,255,255,.15)}.sl-cursor.precision{width:24px;height:24px;border-width:3px;box-shadow:0 0 0 2px rgba(0,0,0,.5),0 4px 12px rgba(0,0,0,.4),0 0 0 6px rgba(255,77,41,.2)}.hue-cursor{position:absolute;width:22px;height:22px;border:3px solid #fff;border-radius:50%;box-shadow:0 0 0 1.5px rgba(0,0,0,.5),0 3px 10px rgba(0,0,0,.35),0 0 16px rgba(255,255,255,.3);pointer-events:none;transform:translate(-50%,-50%);transition:width .2s cubic-bezier(.4, 0, .2, 1),height .2s cubic-bezier(.4, 0, .2, 1),border-width .2s cubic-bezier(.4, 0, .2, 1);will-change:transform;backface-visibility:hidden}.hue-cursor.active{width:26px;height:26px;border-width:3.5px;box-shadow:0 0 0 2px rgba(0,0,0,.6),0 4px 12px rgba(0,0,0,.4),0 0 20px rgba(255,255,255,.4);animation:.3s cubic-bezier(.34,1.56,.64,1) huePickerPulse}@keyframes huePickerPulse{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.15)}}.harmony-marker{position:absolute;width:16px;height:16px;background:#fff;border:2px solid rgba(255,255,255,.9);border-radius:50%;pointer-events:auto;cursor:pointer;z-index:10;transform:translate(-50%,-50%) scale(.8);opacity:0;transition:opacity .4s cubic-bezier(.4, 0, .2, 1),transform .4s cubic-bezier(.34, 1.56, .64, 1),box-shadow .3s;box-shadow:0 0 0 rgba(255,255,255,0)}.harmony-marker.visible{opacity:.9;transform:translate(-50%,-50%) scale(1)}.harmony-marker:hover{opacity:1;transform:translate(-50%,-50%) scale(1.2);box-shadow:0 0 12px currentColor;border-color:#fff}.harmony-marker:active{transform:translate(-50%,-50%) scale(.95)}.harmony-marker::before{content:'';position:absolute;inset:-4px;border-radius:50%;background:currentColor;opacity:.25;filter:blur(6px);pointer-events:none}@keyframes harmonyPulse{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.4)}}.triangle-container{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:58%;height:58%}#trianglePicker{width:100%;height:100%;cursor:crosshair}.triangle-cursor{position:absolute;width:18px;height:18px;border:2.5px solid #fff;border-radius:50%;box-shadow:0 0 0 1.5px rgba(0,0,0,.4),0 2px 6px rgba(0,0,0,.3),0 0 0 4px rgba(255,255,255,.1);pointer-events:none;transform:translate(-50%,-50%);transition:width .15s cubic-bezier(.34, 1.56, .64, 1),height .15s cubic-bezier(.34, 1.56, .64, 1),border-width .15s cubic-bezier(.34, 1.56, .64, 1)}.picker-flat{width:100%;display:flex;flex-direction:column;gap:var(--space-lg)}.hue-slider-container{display:flex;flex-direction:column;gap:var(--space-sm)}.hue-slider-container label{font-weight:600;font-size:var(--font-size-sm);color:var(--text-secondary)}#hueSlider{width:100%;height:16px;border-radius:8px;-webkit-appearance:none;background:linear-gradient(to right,red 0,#ff0 16.67%,#0f0 33.33%,#0ff 50%,#00f 66.67%,#f0f 83.33%,red 100%);outline:0}#hueSlider::-webkit-slider-thumb{-webkit-appearance:none;width:28px;height:28px;border-radius:50%;background:#fff;border:4px solid var(--color-primary);box-shadow:0 2px 8px rgba(0,0,0,.3);cursor:pointer}.sl-box-container{position:relative;width:100%}#slBox{width:100%;height:auto;cursor:crosshair;border-radius:var(--radius-md);box-shadow:0 4px 16px rgba(0,0,0,.3)}.sl-box-cursor{position:absolute;width:20px;height:20px;border:3px solid #fff;border-radius:50%;box-shadow:0 0 0 2px rgba(0,0,0,.5),0 2px 8px rgba(0,0,0,.4);pointer-events:none;transform:translate(-50%,-50%)}.picker-controls{display:flex;flex-direction:column;gap:var(--space-sm);padding:var(--space-md);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.15);border-radius:var(--radius-lg);margin-bottom:0;width:100%}.control-row{display:flex;gap:var(--space-lg);flex-wrap:wrap;align-items:center}.option-checkbox{display:flex;align-items:center;gap:var(--space-sm);color:var(--color-light-gray);font-size:var(--font-size-sm)}.checkbox-custom{width:18px;height:18px;border:1px solid var(--color-gray);border-radius:var(--radius-sm);position:relative;transition:transform .3s cubic-bezier(.4, 0, .2, 1)}.checkbox-custom::after{content:'✓';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(0);color:var(--color-white);font-size:12px;font-weight:700;transition:transform var(--transition-bounce)}.checkbox-label{display:flex;align-items:center;gap:var(--space-xs)}.checkbox-label i{font-size:var(--font-size-sm);color:var(--color-primary)}.export-layout-two-columns{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-lg)}.export-settings-container{padding:var(--space-lg);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.15);border-radius:var(--radius-lg);display:flex;flex-direction:column;gap:var(--space-md)}.extra-settings-title{font-size:var(--font-size-sm);margin:0 0 var(--space-sm) 0;display:flex;align-items:center;gap:var(--space-sm);color:var(--color-white);font-weight:600;font-family:var(--font-primary)}.checkbox-description{margin:calc(-1 * var(--space-sm)) 0 var(--space-sm) 28px;font-size:11px;line-height:1.4;color:rgba(255,255,255,.5);font-family:var(--font-primary)}@media (max-width:768px){.export-layout-two-columns{grid-template-columns:1fr;gap:var(--space-md)}}#harmonyType,.harmony-select{padding:var(--space-md);background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);border-radius:var(--radius-lg);color:var(--text-primary);font-size:var(--font-size-sm);font-family:var(--font-primary);outline:0;cursor:pointer;transition:transform .3s cubic-bezier(.4, 0, .2, 1),box-shadow .3s cubic-bezier(.4, 0, .2, 1);min-width:160px}#harmonyType:hover,.harmony-select:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.2)}#harmonyType:focus,.harmony-select:focus{border-color:var(--color-primary);box-shadow:0 0 0 2px var(--color-primary-light)}.live-wcag-badge{display:flex;align-items:center;justify-content:center;gap:var(--space-sm);padding:var(--space-md);background:rgba(39,174,96,.2);border:2px solid rgba(39,174,96,.5);border-radius:var(--radius-md);margin-bottom:var(--space-lg)}.badge-label{font-size:var(--font-size-sm);text-transform:uppercase;color:#27ae60}.badge-value{font-weight:900;font-size:var(--font-size-lg);color:#fff;background:#27ae60;padding:var(--space-xs) var(--space-md);border-radius:var(--radius-sm)}.live-wcag-badge.fail{background:rgba(231,76,60,.2);border-color:rgba(231,76,60,.5)}.live-wcag-badge.fail .badge-label{color:#e74c3c}.live-wcag-badge.fail .badge-value{background:#e74c3c}.picker-header-bar{display:flex;justify-content:space-between;align-items:center;gap:var(--space-lg);margin-bottom:var(--space-xl);padding:var(--space-md);background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);border-radius:var(--radius-lg)}.picker-modes-inline{display:flex;align-items:center;gap:var(--space-sm)}.mode-label-inline{font-size:var(--font-size-sm);font-weight:600;color:var(--text-secondary);margin-right:var(--space-xs)}.picker-actions{display:flex;align-items:center;gap:var(--space-sm)}.eyedropper-btn{display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-lg);background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:var(--radius-lg);color:var(--text-primary);font-size:var(--font-size-sm);font-weight:600;cursor:pointer;transition:background-color .3s cubic-bezier(.4, 0, .2, 1),border-color .3s cubic-bezier(.4, 0, .2, 1),color .3s cubic-bezier(.4, 0, .2, 1),transform .3s cubic-bezier(.4, 0, .2, 1);transform:translateZ(0)}.eyedropper-btn i{color:var(--color-primary);font-size:var(--font-size-md)}.eyedropper-btn:hover{background:rgba(255,77,41,.1);border-color:var(--color-primary);color:var(--color-primary);transform:translateY(-2px)}.picker-3col-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-2xl);align-items:stretch;margin-top:var(--space-xs)}.colors-wrapper,.formats-wrapper,.harmony-wrapper,.image-wrapper,.picker-wrapper{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.15);border-radius:var(--radius-lg);padding:var(--space-md);display:flex;flex-direction:column}.workspace-right .colors-wrapper{flex:1;min-height:0}.formats-wrapper,.harmony-wrapper,.picker-wrapper{height:100%}.section-heading{display:flex;align-items:center;gap:var(--space-sm);font-size:11px;font-weight:600;color:var(--text-primary);text-transform:uppercase;letter-spacing:.5px;margin:0 0 var(--space-md) 0}.section-heading i{color:var(--color-primary);font-size:11px}.formats-wrapper .section-heading{margin-bottom:var(--space-xl)}.animated-gif-badge{display:inline-flex;align-items:center;gap:var(--space-xs);margin-left:auto;padding:4px 10px;background:rgba(255,193,7,.15);border:1px solid rgba(255,193,7,.3);border-radius:var(--radius-md);font-size:11px;font-weight:600;color:#ffc107;text-transform:uppercase;letter-spacing:.5px}.animated-gif-badge i{color:#ffc107;font-size:10px}.gif-timeline-container{margin-top:var(--space-md);padding:var(--space-md);background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);border-radius:var(--radius-lg)}.gif-timeline-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-sm)}.gif-timeline-info{display:flex;align-items:center;gap:4px;font-size:12px;color:var(--text-secondary)}.gif-frame-label{text-transform:uppercase;letter-spacing:.5px;font-weight:600;font-size:10px;margin-right:4px}.gif-frame-current{color:var(--color-primary);font-weight:700;font-size:14px;min-width:24px;text-align:center}.gif-frame-separator{color:var(--text-muted)}.gif-frame-total{color:var(--text-secondary);font-weight:600}.gif-timeline-controls{display:flex;align-items:center;gap:var(--space-xs)}.gif-control-btn{width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);border-radius:var(--radius-md);color:var(--text-secondary);cursor:pointer;transition:.2s}.gif-control-btn:hover{background:rgba(255,255,255,.12);color:var(--text-primary);border-color:rgba(255,255,255,.25)}.gif-control-btn:active{transform:scale(.95)}.gif-control-btn.gif-play-btn{width:40px;height:40px;background:var(--color-primary);border-color:var(--color-primary);color:#fff}.gif-control-btn.gif-play-btn:hover{background:var(--color-primary-hover);border-color:var(--color-primary-hover);color:#fff}.gif-control-btn.gif-play-btn.playing{background:rgba(255,193,7,.2);border-color:rgba(255,193,7,.4);color:#ffc107}.gif-timeline-track-wrapper{position:relative;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,0.2) transparent;margin-bottom:var(--space-sm)}.gif-timeline-track-wrapper::-webkit-scrollbar{height:6px}.gif-timeline-track-wrapper::-webkit-scrollbar-track{background:0 0}.gif-timeline-track-wrapper::-webkit-scrollbar-thumb{background:rgba(255,255,255,.2);border-radius:3px}.gif-timeline-track{display:flex;gap:4px;padding:var(--space-xs) 0;min-width:min-content}.gif-frame-thumb{width:48px;height:36px;flex-shrink:0;border-radius:var(--radius-sm);border:2px solid transparent;cursor:pointer;transition:.2s;position:relative;overflow:hidden;background:rgba(0,0,0,.3)}.gif-frame-thumb canvas,.gif-frame-thumb img{width:100%;height:100%;object-fit:cover;pointer-events:none}.gif-frame-thumb:hover{border-color:rgba(255,255,255,.4);transform:scale(1.05)}.gif-frame-thumb.active{border-color:var(--color-primary)}.gif-frame-thumb.has-colors::after{content:'';position:absolute;bottom:2px;right:2px;width:8px;height:8px;background:#27ae60;border-radius:50%;border:1px solid rgba(0,0,0,.3)}.gif-frame-number{position:absolute;bottom:2px;left:2px;font-size:8px;font-weight:700;color:#fff;background:rgba(0,0,0,.6);padding:1px 3px;border-radius:2px;line-height:1}.gif-timeline-slider-wrapper{padding:0 var(--space-xs)}.gif-timeline-slider{width:100%;height:6px;-webkit-appearance:none;appearance:none;background:rgba(255,255,255,.1);border-radius:3px;outline:0;cursor:pointer}.gif-timeline-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;background:var(--color-primary);border-radius:50%;cursor:pointer;transition:transform .2s}.gif-timeline-slider::-webkit-slider-thumb:hover{transform:scale(1.2)}.gif-timeline-slider::-moz-range-thumb{width:16px;height:16px;background:var(--color-primary);border:none;border-radius:50%;cursor:pointer}@media (max-width:768px){.gif-frame-thumb{width:40px;height:30px}.gif-control-btn{width:28px;height:28px}.gif-control-btn.gif-play-btn{width:36px;height:36px}}.section-heading-with-action{display:flex;justify-content:space-between;align-items:flex-start;margin:0 0 var(--space-md) 0}.section-heading-with-action .heading-text{display:flex;align-items:center;gap:var(--space-sm);font-size:11px;font-weight:600;color:var(--text-primary);text-transform:uppercase;letter-spacing:.5px}.section-heading-with-action .heading-text i{color:var(--color-primary);font-size:11px}.section-heading-with-action .heading-actions{display:flex;gap:var(--space-xs);align-items:center}.star-btn-inline{width:32px;height:32px;background:rgba(255,193,7,.12);border:1px solid rgba(255,193,7,.18);border-radius:var(--radius-lg);color:rgba(255,193,7,.9);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:var(--font-size-sm);transition:transform .3s cubic-bezier(.4, 0, .2, 1),box-shadow .3s cubic-bezier(.4, 0, .2, 1);position:relative;overflow:hidden;contain:layout style;flex-shrink:0;transform:translateZ(0);-webkit-transform:translateZ(0)}.star-btn-inline:hover{background:rgba(255,193,7,.15);border-color:rgba(255,193,7,.25);color:#ffc107;transform:translate3d(0,-2px,0) scale3d(1.01,1.01,1);will-change:transform}.star-btn-inline.active{background:rgba(255,193,7,.2);border-color:#ffc107;color:#ffc107}#iroPickerFlat{display:flex;justify-content:center;align-items:center;margin-bottom:var(--space-lg)}.eyedropper-btn-inline{width:100%;max-width:80%;margin:auto auto 0;padding:var(--space-md) var(--space-lg);background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius-lg);color:var(--text-primary);font-size:var(--font-size-sm);font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:var(--space-sm);transition:background-color .3s cubic-bezier(.4, 0, .2, 1),border-color .3s cubic-bezier(.4, 0, .2, 1),color .3s cubic-bezier(.4, 0, .2, 1),transform .3s cubic-bezier(.4, 0, .2, 1)}.eyedropper-btn-inline:hover{background:rgba(255,77,41,.1);border-color:rgba(255,77,41,.3);color:var(--color-primary);transform:translateY(-2px)}.eyedropper-btn-inline i{font-size:var(--font-size-base);color:var(--color-primary)}.eyedropper-btn-inline:hover i{color:var(--color-primary)}.eyedropper-btn-inline span{text-transform:uppercase;letter-spacing:.5px}.IroHandle{transition:none!important}.IroBox,.IroSlider,.IroWheel{border:none!important;box-shadow:none!important}.IroSlider,.IroWheel{background:0 0!important}.IroBox,.IroSlider{border-radius:var(--radius-md)!important;overflow:hidden!important}.IroBox svg,.IroSlider svg{overflow:visible!important;display:block}.IroBox svg rect[fill="#ffffff"],.IroBox svg rect[fill="rgb(255, 255, 255)"],.IroBox svg rect[fill=white],.IroBox>svg>rect:first-of-type,.IroSlider svg rect[fill="#ffffff"],.IroSlider svg rect[fill="rgb(255, 255, 255)"],.IroSlider svg rect[fill=white],.IroSlider>svg>rect:first-of-type{display:none!important}.harmonies-section{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.15);border-radius:var(--radius-lg);padding:var(--space-lg)}.harmonies-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-md);margin-bottom:var(--space-xl)}.harmony-preview-row{display:flex;gap:var(--space-sm);padding:var(--space-md);background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.08);border-radius:var(--radius-md)}.harmony-color{flex:1;height:120px;border-radius:var(--radius-sm);border:2px solid var(--glass-border);cursor:pointer;transition:transform .3s cubic-bezier(.4, 0, .2, 1),border-color .3s cubic-bezier(.4, 0, .2, 1);position:relative;overflow:hidden}.harmony-color:hover{transform:scale(1.05) translateY(-2px);border-color:var(--color-primary)}.harmony-color.main-color{border:2px solid var(--color-primary)}.harmony-color.main-color::after{content:"CURRENT";position:absolute;bottom:4px;left:50%;transform:translateX(-50%);font-size:8px;font-weight:700;color:rgba(255,255,255,.8);background:rgba(0,0,0,.6);padding:2px 6px;border-radius:3px;letter-spacing:.5px}.formats-section{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.15);border-radius:var(--radius-lg);padding:var(--space-lg);flex:1;display:flex;flex-direction:column}.formats-list-compact{display:flex;flex-direction:column;gap:var(--space-sm)}.format-row-compact{display:flex;align-items:center;gap:var(--space-xs);background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.08);border-radius:var(--radius-lg);padding:4px var(--space-sm);height:46px}.format-label-compact{font-size:10px;font-weight:700;color:var(--text-secondary);text-transform:uppercase;width:42px;flex-shrink:0;padding-left:var(--space-xs);padding-right:var(--space-sm);border-right:1px solid rgba(255,255,255,.15);margin-right:var(--space-xs)}.format-input-compact{flex:1;background:0 0;border:none;color:var(--text-primary);font-size:11px;font-family:'Courier New',monospace;padding:0;outline:0}.format-copy-compact{width:36px;height:36px;background:rgba(255,77,41,.1);border:1px solid rgba(255,77,41,.2);border-radius:var(--radius-lg);color:var(--color-primary);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .3s cubic-bezier(.4, 0, .2, 1),background .3s cubic-bezier(.4, 0, .2, 1),border-color .3s cubic-bezier(.4, 0, .2, 1);font-size:var(--font-size-sm);flex-shrink:0}.format-copy-compact:hover{background:rgba(255,77,41,.2);border-color:rgba(255,77,41,.4);transform:scale(1.05)}@media (max-width:1024px){body{background:linear-gradient(180deg,#05204b 0,#031127 100%)}.picker-l-grid{grid-template-columns:1fr;gap:var(--space-2xl)}.picker-header-bar{flex-direction:column;align-items:stretch}.picker-actions,.picker-modes-inline{justify-content:center}}@media (max-width:768px){.harmonies-grid{grid-template-columns:repeat(2,1fr)}.eyedropper-btn span,.mode-label-inline{display:none}}.palette-builder{margin-top:var(--space-xl)}.palette-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--space-lg);margin-bottom:var(--space-2xl)}.palette-slot{display:flex;flex-direction:column;gap:var(--space-sm)}.palette-swatch{aspect-ratio:1;border-radius:var(--radius-xl);border:2px solid var(--glass-border);cursor:pointer;transition:transform .3s cubic-bezier(.4, 0, .2, 1);position:relative;overflow:hidden}.palette-swatch:hover{transform:translate3d(0,-4px,0) scale3d(1.05,1.05,1)}.palette-swatch.locked::after{content:'\f023';font-family:'Font Awesome 5 Free';font-weight:900;position:absolute;top:var(--space-sm);right:var(--space-sm);color:#fff;font-size:var(--font-size-xs);background:rgba(0,0,0,.6);padding:var(--space-xs);border-radius:var(--radius-sm)}.palette-controls{display:flex;gap:var(--space-xs)}.palette-hex-input{flex:1;padding:var(--space-sm);background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:var(--radius-md);color:var(--text-primary);font-family:var(--font-mono);font-size:var(--font-size-xs);text-align:center;outline:0;transition:border-color .3s}.palette-hex-input:focus{border-color:var(--color-primary)}.lock-btn,.remove-btn{width:32px;height:32px;background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:var(--radius-lg);color:var(--text-primary);cursor:pointer;transition:background-color .3s,border-color .3s,color .3s;display:flex;align-items:center;justify-content:center;font-size:var(--font-size-xs)}.lock-btn:hover{background:rgba(243,156,18,.15);border-color:rgba(243,156,18,.3);color:var(--color-warning)}.lock-btn.active{background:rgba(243,156,18,.2);border-color:rgba(243,156,18,.4);color:var(--color-warning)}.remove-btn:hover{background:var(--color-error-light);border-color:rgba(231,76,60,.3);color:var(--color-error)}.harmony-buttons{display:flex;gap:var(--space-sm);margin-bottom:var(--space-xl);flex-wrap:wrap}.harmony-btn{padding:var(--space-md) var(--space-lg);background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:var(--radius-lg);color:var(--text-primary);font-weight:600;font-size:var(--font-size-sm);cursor:pointer;transition:background-color .3s cubic-bezier(.4, 0, .2, 1),border-color .3s cubic-bezier(.4, 0, .2, 1),color .3s cubic-bezier(.4, 0, .2, 1),transform .3s cubic-bezier(.4, 0, .2, 1);display:flex;align-items:center;gap:var(--space-xs)}.harmony-btn:hover{background:var(--color-primary);border-color:var(--color-primary);color:#fff;transform:translate3d(0,-2px,0)}.palette-actions{display:flex;gap:var(--space-md);justify-content:center}.gradient-builder{display:grid;grid-template-columns:1fr 400px;gap:var(--space-2xl);margin-top:var(--space-xl)}.gradient-preview-area{min-height:400px;border-radius:var(--radius-xl);border:2px solid var(--glass-border);transition:transform .3s cubic-bezier(.4, 0, .2, 1);background:linear-gradient(90deg,#ff4d29,#0055a4);position:relative;overflow:hidden}.gradient-preview-area:hover{transform:translate3d(0,-2px,0)}.gradient-controls{display:flex;flex-direction:column;gap:var(--space-lg)}.gradient-type-selector{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-sm)}.gradient-type-btn{padding:var(--space-md);background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:var(--radius-lg);color:var(--text-primary);font-size:var(--font-size-sm);font-weight:600;cursor:pointer;transition:background-color .3s cubic-bezier(.4, 0, .2, 1),border-color .3s cubic-bezier(.4, 0, .2, 1);display:flex;align-items:center;justify-content:center;gap:var(--space-xs)}.gradient-type-btn:hover{background:rgba(255,77,41,.15);border-color:var(--color-primary)}.gradient-type-btn.active{background:rgba(25,111,61,.15);border-color:#196f3d}.gradient-angle{display:flex;flex-direction:column;gap:var(--space-sm)}.gradient-angle label{font-size:var(--font-size-sm);color:var(--text-secondary);font-weight:600}.gradient-angle input[type=range]{width:100%;height:12px;border-radius:6px;background:var(--glass-bg);border:1px solid var(--glass-border);outline:0;-webkit-appearance:none;appearance:none;cursor:pointer}.gradient-angle input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;background:var(--color-primary);border:2px solid #fff;box-shadow:0 2px 8px rgba(0,0,0,.3);cursor:pointer}.gradient-angle input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--color-primary);border:2px solid #fff;box-shadow:0 2px 8px rgba(0,0,0,.3);cursor:pointer}.gradient-stops{display:flex;flex-direction:column;gap:var(--space-md)}.gradient-stops h5{font-size:var(--font-size-sm);color:var(--color-white);font-weight:600;margin-bottom:var(--space-sm)}.add-stop-btn{padding:var(--space-md);background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:var(--radius-lg);color:var(--text-primary);cursor:pointer;transition:background-color .3s,border-color .3s,color .3s;display:flex;align-items:center;justify-content:center;gap:var(--space-sm);font-weight:600}.add-stop-btn:hover{background:rgba(39,174,96,.15);border-color:rgba(39,174,96,.3);color:var(--color-success)}.gradient-css{display:flex;flex-direction:column;gap:var(--space-sm)}.gradient-css label{font-size:var(--font-size-sm);color:var(--text-secondary);font-weight:600}.gradient-css textarea{padding:var(--space-md);background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:var(--radius-lg);color:var(--text-primary);font-family:var(--font-mono);font-size:var(--font-size-sm);min-height:100px;resize:vertical;outline:0;transition:border-color .3s}.gradient-css textarea:focus{border-color:var(--color-primary)}.gradient-presets{display:flex;flex-direction:column;gap:var(--space-sm)}.gradient-presets h5{font-size:var(--font-size-sm);color:var(--color-white);font-weight:600}.presets-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-sm)}.favorites-sidebar,.history-sidebar{position:fixed;right:-320px;top:100px;width:300px;height:calc(100vh - 120px);background:rgba(255,255,255,.06);border-left:1px solid rgba(255,255,255,.15);padding:var(--space-xl);z-index:var(--z-fixed);overflow-y:auto;transition:right .3s cubic-bezier(.4, 0, .2, 1)}.favorites-sidebar.open,.history-sidebar.open{right:0}.sidebar-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-lg)}.sidebar-header h4{font-size:var(--font-size-md);color:var(--color-white);font-weight:700}.close-sidebar{width:32px;height:32px;background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:var(--radius-md);color:var(--text-primary);cursor:pointer;transition:background-color .3s,border-color .3s,color .3s;display:flex;align-items:center;justify-content:center}.close-sidebar:hover{background:var(--color-error);border-color:var(--color-error);color:#fff}.favorite-colors-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-sm)}.favorite-color-item{aspect-ratio:1;border-radius:var(--radius-md);border:1px solid var(--glass-border)}.favorite-color-item:hover{transform:scale(1.1);z-index:1}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-sm);padding:var(--space-md) var(--space-xl);border-radius:var(--radius-lg);font-weight:700;font-size:var(--font-size-sm);text-decoration:none;cursor:pointer;border:none;position:relative;overflow:hidden;transition:transform .3s cubic-bezier(.4, 0, .2, 1);text-transform:uppercase;letter-spacing:.5px;white-space:nowrap}.btn-primary{background:linear-gradient(135deg,var(--color-primary),var(--color-primary-dark));color:var(--color-white);border:1px solid rgba(255,77,41,.3);position:relative;z-index:1;overflow:hidden}.btn-primary:hover{background:linear-gradient(135deg,var(--color-primary-dark),var(--color-primary));transform:translate3d(0,-2px,0)}.btn-primary:hover::after{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);z-index:-1;animation:.8s ease-out shine}@keyframes shine{to{left:100%}}.btn-secondary{background:rgba(255,255,255,.14);color:var(--text-primary);border:1px solid var(--glass-border)}.btn-secondary:hover{background:rgba(255,77,41,.15);border-color:var(--color-primary);transform:translate3d(0,-2px,0)}.btn-block{max-width:80%;margin:0 auto;display:flex}.formats-wrapper .btn-block{margin:auto auto 0}.tool-modal{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:radial-gradient(circle at 30% 40%,rgba(255,77,41,.12) 0,transparent 50%),radial-gradient(circle at 70% 60%,rgba(0,85,164,.1) 0,transparent 50%),linear-gradient(135deg,rgba(3,16,36,.97) 0,rgba(5,30,62,.98) 50%,rgba(3,16,36,.99) 100%);z-index:var(--z-modal);align-items:center;justify-content:center}.tool-modal.show{display:flex}.tool-modal-content{background:rgba(255,255,255,.14);border-radius:24px;border:1px solid rgba(255,255,255,.15);max-width:500px;width:90%;max-height:80vh;overflow:hidden;animation:.3s ease-out toolModalSlideIn}@keyframes toolModalSlideIn{from{opacity:0;transform:translateY(-50px) scale(.9)}to{opacity:1;transform:translateY(0) scale(1)}}.tool-modal-header{display:flex;justify-content:space-between;align-items:center;padding:var(--space-xl);border-bottom:1px solid var(--color-dark-gray)}.tool-modal-header h3{color:var(--color-white);font-size:var(--font-size-lg);margin:0}.tool-modal-close{width:36px;height:36px;background:var(--color-dark-gray);border:none;border-radius:var(--radius-md);color:var(--color-light-gray);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background-color .3s,color .3s}.tool-modal-close:hover{background:var(--color-primary);color:var(--color-white)}.tool-modal-body{padding:var(--space-xl)}.tool-modal-body.modal-scrollable{max-height:60vh;overflow-y:auto}.tool-modal-title{display:flex;align-items:center;gap:var(--space-md)}.tool-modal-title i{color:var(--color-primary);font-size:var(--font-size-lg)}.modal-description{margin-bottom:var(--space-lg);color:var(--text-secondary);font-size:var(--font-size-sm)}.modal-description p{margin:0}.modal-actions{display:flex;gap:var(--space-md);padding:var(--space-xl);border-top:1px solid var(--color-dark-gray)}.modal-actions .btn{flex:1}#exportModal .tool-modal-content{max-width:500px}.export-option-group{margin-bottom:var(--space-2xl);padding-bottom:var(--space-2xl);border-bottom:1px solid var(--color-dark-gray)}.export-option-group:last-child{margin-bottom:0;padding-bottom:0;border-bottom:none}.export-option-group h4{display:flex;align-items:center;gap:var(--space-sm);font-size:var(--font-size-md);font-weight:600;color:var(--color-white);margin-bottom:var(--space-lg)}.export-option-group h4 i{color:var(--color-primary)}.export-format-buttons{display:flex;gap:var(--space-md);margin-bottom:var(--space-lg)}.export-format-buttons .btn{flex:1}.export-format-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-md)}.export-format-grid .btn{justify-content:center}.export-options-checkboxes{display:flex;flex-direction:column;gap:var(--space-md);padding:var(--space-lg);background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.08);border-radius:var(--radius-md)}.export-option-group .btn-primary,.export-option-group .btn-secondary{width:100%;justify-content:center}.modal-preset-manager{max-width:900px;width:90%;max-height:80vh}.modal-preset-manager .tool-modal-content{max-width:900px;width:90%}.modal-preset-manager .tool-modal-header{display:flex;justify-content:space-between;align-items:center;padding:var(--space-xl);border-bottom:1px solid rgba(255,255,255,.1);position:relative}.modal-preset-body{display:grid;grid-template-columns:1fr 1.5fr;gap:0;padding:0;height:500px}.preset-create-panel{background:rgba(255,255,255,.04);padding:var(--space-xl);border-right:1px solid rgba(255,255,255,.1);position:relative}.preset-list-panel{background:0 0;padding:var(--space-xl);display:flex;flex-direction:column;position:relative}.preset-section-header{display:flex;justify-content:space-between;align-items:center;gap:var(--space-lg);margin-bottom:var(--space-xl)}.preset-section-header h4{display:flex;align-items:center;gap:var(--space-sm);font-size:var(--font-size-md);color:var(--color-white);margin:0}.preset-section-header h4 i{color:var(--color-primary)}.preset-header-left{display:flex;align-items:center;gap:var(--space-md)}.preset-count{padding:var(--space-xs) var(--space-sm);background:var(--color-primary-light);border-radius:var(--radius-full);font-size:var(--font-size-xs);color:var(--color-primary);font-weight:600}.btn-clear-all{display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-md);background:rgba(231,76,60,.08);border:1px solid rgba(231,76,60,.2);border-radius:var(--radius-lg);color:rgba(231,76,60,.9);font-size:var(--font-size-sm);font-weight:600;transition:transform .3s cubic-bezier(.4, 0, .2, 1),box-shadow .3s cubic-bezier(.4, 0, .2, 1),border-color .3s cubic-bezier(.4, 0, .2, 1),background .3s cubic-bezier(.4, 0, .2, 1);cursor:pointer;transform:translateZ(0)}.btn-clear-all:hover{background:rgba(231,76,60,.15);border-color:rgba(231,76,60,.4);transform:translate3d(0,-2px,0)}.btn-clear-all:active{transform:translate3d(0,0,0)}.btn-clear-all i{font-size:var(--font-size-base)}.preset-create-form{display:flex;flex-direction:column;gap:var(--space-lg)}.preset-preview-card.new-preset{background:rgba(255,255,255,.05);border:2px dashed var(--color-primary);border-radius:var(--radius-lg);padding:var(--space-lg);display:flex;gap:var(--space-lg);align-items:center;position:relative;z-index:1}.preset-preview-card .preset-preview-colors{width:80px;height:80px;background:#fff;border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden}.preset-preview-color{flex:1;height:100%}.preset-preview-info{flex:1;display:flex;flex-direction:column;gap:var(--space-sm);min-width:0}.preset-name-input{width:100%;padding:var(--space-sm);border:1px solid rgba(255,255,255,.15);border-radius:var(--radius-md);background:rgba(255,255,255,.08);color:var(--color-white);font-size:var(--font-size-base);font-family:var(--font-primary);outline:0;transition:transform .3s cubic-bezier(.4, 0, .2, 1)}.preset-name-input:focus{border-color:var(--color-primary)}.preset-name-input::placeholder{color:var(--color-gray)}.preset-metadata{display:flex;gap:var(--space-md);align-items:center}.preset-type-badge{display:inline-flex;align-items:center;gap:var(--space-xs);padding:var(--space-xs) var(--space-sm);background:var(--color-primary-light);border-radius:var(--radius-full);font-size:var(--font-size-xs);font-weight:600;color:var(--color-primary)}.preset-type-badge i{font-size:10px}.preset-date{display:flex;align-items:center;gap:var(--space-xs);font-size:var(--font-size-xs);color:var(--color-gray)}.preset-date i{font-size:10px}.preset-list{max-height:500px;overflow-y:auto;display:flex;flex-direction:column;gap:var(--space-md);padding-right:var(--space-sm)}.preset-item{position:relative;border-radius:var(--radius-lg);overflow:hidden;cursor:pointer;height:80px;flex-shrink:0;transition:border-color .3s cubic-bezier(.4, 0, .2, 1)}.preset-item:hover{border-color:var(--color-primary)}.preset-item .preset-preview-colors{width:100%;height:100%;display:flex;position:relative;overflow:hidden}.preset-item .preset-preview-color{height:100%;flex-shrink:0}.preset-overlay-info{position:absolute;bottom:0;left:0;right:0;padding:var(--space-sm) var(--space-md);background:linear-gradient(to top,rgba(0,0,0,.8),transparent);display:flex;justify-content:space-between;align-items:flex-end;gap:var(--space-md)}.preset-overlay-left{flex:1;min-width:0}.preset-overlay-right{display:flex;gap:var(--space-sm);align-items:center;flex-shrink:0}.preset-item-name{font-weight:700;color:#fff;font-size:var(--font-size-sm);text-shadow:0 1px 2px rgba(0,0,0,.5);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.preset-overlay-right .preset-type-badge{display:flex;align-items:center;gap:4px;padding:2px 8px;background:rgba(255,77,41,.9);border-radius:var(--radius-full);font-size:10px;color:#fff;font-weight:600;white-space:nowrap}.preset-overlay-right .preset-type-badge i{font-size:9px}.preset-overlay-right .preset-type-badge span{text-transform:capitalize}.preset-date-badge{display:flex;align-items:center;gap:4px;padding:2px 8px;background:rgba(0,0,0,.6);border-radius:var(--radius-full);font-size:10px;color:rgba(255,255,255,.9);font-weight:600;white-space:nowrap}.preset-date-badge i{font-size:9px}.preset-delete-btn{position:absolute;top:8px;right:8px;width:32px;height:32px;background:rgba(231,76,60,.15);border:1px solid rgba(231,76,60,.3);border-radius:var(--radius-lg);color:rgba(231,76,60,.9);font-size:var(--font-size-xs);display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:1;transition:background .2s,border-color .2s,color .2s;z-index:10}.preset-delete-btn:hover{background:rgba(231,76,60,.9);border-color:rgba(231,76,60,.6);color:#fff}.preset-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--space-3xl) var(--space-xl);text-align:center;color:var(--text-secondary)}.preset-empty i{font-size:3rem;color:rgba(255,193,7,.3);margin-bottom:var(--space-lg)}.preset-empty p{margin:0;font-size:var(--font-size-sm)}.preset-empty-hint{font-size:var(--font-size-xs);color:rgba(255,255,255,.4);margin-top:var(--space-xs)}body.modal-open{overflow:hidden!important;position:fixed;width:100%;height:100%}.gradient-library-fullscreen{padding:var(--space-xl);overflow:hidden}.gradient-library-fullscreen .tool-modal-content{width:100%;max-width:1600px;height:calc(100vh - var(--space-xl) * 2);max-height:none;display:flex;flex-direction:column}.gradient-library-header{display:flex;align-items:center;justify-content:space-between;padding:var(--space-lg) var(--space-xl);gap:var(--space-xl);position:relative}.gradient-library-header-left{display:flex;align-items:center;gap:var(--space-md);flex-shrink:0}.gradient-library-header-left .tool-modal-title{margin:0}.gradient-library-header-center{position:absolute;left:50%;transform:translateX(-50%);width:400px}.gradient-count-badge{display:inline-flex;align-items:center;justify-content:center;padding:var(--space-xs) var(--space-sm);background:rgba(255,77,41,.2);border-radius:var(--radius-full);font-size:var(--font-size-xs);color:var(--color-primary);font-weight:700}.gradient-library-header .gradient-library-search{padding:0;border-bottom:none}.search-input-wrapper{position:relative;display:flex;align-items:center}.search-input-wrapper i{position:absolute;left:var(--space-md);color:var(--text-secondary);font-size:var(--font-size-sm)}.search-input-wrapper input{width:100%;padding:var(--space-sm) var(--space-md) var(--space-sm) calc(var(--space-md) * 3);background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius-lg);color:var(--text-primary);font-size:var(--font-size-sm);outline:0;transition:border-color .3s,background .3s}.search-input-wrapper input:focus{border-color:var(--color-primary);background:rgba(255,255,255,.08)}.search-input-wrapper input::placeholder{color:var(--text-secondary)}.gradient-library-body{flex:1;overflow:hidden;padding:0}.gradient-library-content{height:100%;overflow-y:auto;padding:var(--space-lg) var(--space-xl) var(--space-xl)}.gradient-category{margin-bottom:var(--space-xl)}.gradient-category:last-child{margin-bottom:0}.gradient-category-header{display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-md);background:rgba(255,255,255,.12);border-radius:var(--radius-md);margin-bottom:var(--space-md);font-size:var(--font-size-xs);font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--text-secondary)}.gradient-category-header i{color:var(--color-primary);font-size:var(--font-size-sm)}.gradient-category-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--space-md)}.gradient-library-card{position:relative;border-radius:var(--radius-md);overflow:hidden;cursor:pointer;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);transition:transform .2s cubic-bezier(.4, 0, .2, 1),border-color .2s cubic-bezier(.4, 0, .2, 1)}.gradient-library-card:hover{transform:translateY(-2px) scale(1.02);border-color:var(--color-primary)}.gradient-card-preview{width:100%;height:80px;position:relative}.gradient-card-info{padding:var(--space-sm) var(--space-md);background:rgba(0,0,0,.4)}.gradient-card-name{font-size:var(--font-size-xs);font-weight:600;color:var(--text-primary);text-transform:capitalize;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.gradient-click-hint{position:absolute;inset:0;background:rgba(0,0,0,.75);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .15s;pointer-events:none}.gradient-library-card:hover .gradient-click-hint{opacity:1}.gradient-click-hint-text{color:#fff;font-size:var(--font-size-xs);font-weight:600;display:flex;align-items:center;gap:var(--space-xs)}.gradient-click-hint-text i{font-size:var(--font-size-sm);color:var(--color-primary)}@media (max-width:1400px){.gradient-category-grid{grid-template-columns:repeat(4,1fr)}}@media (max-width:1100px){.gradient-category-grid{grid-template-columns:repeat(3,1fr)}}@media (max-width:1024px){.gradient-library-header-center{position:relative;left:auto;transform:none;width:200px;flex-shrink:1;margin-left:auto;margin-right:var(--space-md)}}@media (max-width:768px){.gradient-library-fullscreen{padding:var(--space-md)}.gradient-library-fullscreen .tool-modal-content{height:calc(100vh - var(--space-md) * 2)}.gradient-library-header{flex-wrap:wrap;gap:var(--space-md)}.gradient-library-header-center{position:relative;left:auto;transform:none;order:3;width:100%;margin-left:0;margin-right:0}.gradient-category-grid{grid-template-columns:repeat(2,1fr)}.modal-preset-manager .tool-modal-content{max-width:95%;width:95%;max-height:90vh}.modal-preset-manager .tool-modal-header{padding:var(--space-md)}.modal-preset-manager .tool-modal-header h3{font-size:var(--font-size-sm)}.modal-preset-body{display:flex;flex-direction:column;height:auto;max-height:calc(90vh - 60px);overflow-y:auto}.preset-create-panel{padding:var(--space-md);border-right:none;border-bottom:1px solid rgba(255,255,255,.1);order:1}.preset-list-panel{padding:var(--space-md);order:2;max-height:300px;overflow-y:auto}.preset-section-header{margin-bottom:var(--space-md)}.preset-section-header h4{font-size:var(--font-size-sm)}.preset-preview-card.new-preset{padding:var(--space-sm);gap:var(--space-sm)}.preset-preview-card .preset-preview-colors{width:48px;height:48px}.preset-name-input{padding:var(--space-sm);font-size:var(--font-size-sm);height:40px}.preset-metadata{display:none}.btn-save-preset{padding:var(--space-xs) var(--space-md);font-size:var(--font-size-xs)}.preset-item{height:56px}.preset-overlay-info{padding:var(--space-xs) var(--space-sm)}.preset-item-name{font-size:11px}.preset-overlay-right{flex-direction:row;align-items:center;gap:4px}.preset-overlay-right .preset-date-badge,.preset-overlay-right .preset-type-badge{font-size:8px;padding:2px 6px}.preset-overlay-right .preset-date-badge span,.preset-overlay-right .preset-type-badge span{display:inline;font-size:8px}.btn-clear-all span{display:none}.btn-clear-all{width:32px;height:32px;padding:0;justify-content:center}.preset-list{max-height:200px;gap:var(--space-sm)}}@media (max-width:480px){.preset-overlay-info{padding:var(--space-xs) var(--space-sm)}.preset-item-name{font-size:11px}.preset-overlay-right .preset-date-badge span,.preset-overlay-right .preset-type-badge span{display:inline;font-size:7px}.preset-overlay-right{flex-direction:row;gap:4px}}.modal-history-v2{max-width:800px}.history-header-info{margin-bottom:var(--space-lg);padding-bottom:var(--space-md);border-bottom:1px solid rgba(255,255,255,.1)}.history-header-info p{color:var(--text-secondary);font-size:var(--font-size-sm);margin:0 0 var(--space-md) 0}.history-mode-legend{display:flex;flex-wrap:wrap;gap:var(--space-md)}.history-mode-legend .legend-item{display:inline-flex;align-items:center;gap:var(--space-xs);font-size:var(--font-size-xs);color:var(--text-secondary);background:rgba(255,255,255,.05);padding:var(--space-xs) var(--space-sm);border-radius:var(--radius-sm)}.history-mode-legend .legend-item i{font-size:10px;color:var(--color-primary)}.history-colors-grid-v2{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:var(--space-md)}.history-color-card{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:var(--radius-lg);overflow:hidden;cursor:pointer;transition:transform .3s cubic-bezier(.4, 0, .2, 1),border-color .3s cubic-bezier(.4, 0, .2, 1);transform:translateZ(0)}.history-color-card:hover{transform:translate3d(0,-2px,0) scale3d(1.02,1.02,1);border-color:var(--color-primary)}.history-color-card .history-color-preview{width:100%;height:80px;position:relative;border-bottom:1px solid rgba(255,255,255,.08)}.history-mode-badge{position:absolute;top:var(--space-xs);right:var(--space-xs);background:rgba(0,0,0,.6);border-radius:var(--radius-sm);padding:4px 6px;display:flex;align-items:center;justify-content:center}.history-mode-badge i{font-size:10px;color:var(--color-white)}.history-color-card .history-color-info{padding:var(--space-sm) var(--space-md)}.history-color-card .history-color-hex{font-family:var(--font-primary);font-size:var(--font-size-sm);font-weight:700;color:var(--text-primary);margin-bottom:var(--space-xs)}.history-color-meta{display:flex;align-items:center;justify-content:space-between;gap:var(--space-xs)}.history-mode-label{font-size:10px;font-weight:600;color:var(--color-primary);text-transform:uppercase;letter-spacing:.5px}.history-time{font-size:var(--font-size-xs);color:var(--text-secondary)}.history-empty-state{grid-column:1/-1;text-align:center;padding:var(--space-3xl);color:var(--text-secondary)}.history-empty-state i{font-size:3rem;color:rgba(255,255,255,.2);margin-bottom:var(--space-lg);display:block}.history-empty-state p{font-size:var(--font-size-lg);font-weight:600;color:var(--text-primary);margin:0 0 var(--space-sm) 0}.history-empty-state span{font-size:var(--font-size-sm);color:var(--text-secondary)}@media (max-width:768px){.modal-history-v2{max-width:95%;width:95%}.history-header-info{margin-bottom:var(--space-md);padding-bottom:var(--space-sm)}.history-header-info p{font-size:var(--font-size-xs);margin-bottom:var(--space-sm)}.history-mode-legend{gap:var(--space-xs)}.history-mode-legend .legend-item{font-size:10px;padding:2px 6px}.history-colors-grid-v2{grid-template-columns:repeat(2,1fr);gap:var(--space-sm)}.history-color-card .history-color-preview{height:60px}.history-color-card .history-color-info{padding:var(--space-xs) var(--space-sm)}.history-color-card .history-color-hex{font-size:var(--font-size-xs)}.history-mode-label{font-size:9px}.history-time{font-size:10px}.history-empty-state{padding:var(--space-xl)}.history-empty-state i{font-size:2rem;margin-bottom:var(--space-md)}.history-empty-state p{font-size:var(--font-size-sm)}.history-empty-state span{font-size:var(--font-size-xs)}}.modal-favorites .tool-modal-content{max-width:700px}.color-favorites-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:var(--space-lg)}.favorite-color-item{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius-lg);padding:var(--space-md);position:relative;cursor:pointer;transition:transform .3s cubic-bezier(.4, 0, .2, 1),border-color .3s cubic-bezier(.4, 0, .2, 1);transform:translateZ(0)}.favorite-color-item:hover{transform:translate3d(0,-2px,0) scale3d(1.02,1.02,1);border-color:var(--color-primary)}.favorite-color-preview{width:100%;height:80px;border-radius:var(--radius-md);margin-bottom:var(--space-sm);border:1px solid rgba(255,255,255,.1)}.favorite-color-info{text-align:center}.favorite-color-hex{font-family:'Courier New',monospace;font-size:var(--font-size-sm);color:var(--text-primary);font-weight:600;margin-bottom:var(--space-xs)}.favorite-remove-btn{position:absolute;top:8px;right:8px;width:24px;height:24px;background:rgba(0,0,0,.6);border:none;border-radius:50%;color:var(--color-white);cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .3s,background .3s;font-size:var(--font-size-xs)}.favorite-color-item:hover .favorite-remove-btn{opacity:1}.favorite-remove-btn:hover{background:var(--color-error)}.favorites-empty-state{grid-column:1/-1;text-align:center;padding:var(--space-3xl);color:var(--text-secondary)}.favorites-empty-state i{font-size:3rem;color:rgba(255,255,255,.2);margin-bottom:var(--space-lg);display:block}.favorites-empty-state p{font-size:var(--font-size-lg);font-weight:600;color:var(--text-primary);margin:0 0 var(--space-sm) 0}.favorites-empty-state span{font-size:var(--font-size-sm);color:var(--text-secondary)}.hidden{display:none}.visible{display:block}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}@media (max-width:1400px){.manual-layout{grid-template-columns:380px 1fr;gap:var(--space-2xl)}.wheel-container{width:380px;height:380px}}@media (max-width:1200px){.mode-buttons{grid-template-columns:repeat(3,1fr)}.manual-layout{grid-template-columns:1fr;gap:var(--space-2xl)}.settings-layout-grid{grid-template-columns:1fr;gap:var(--space-lg)}.settings-right-column{align-items:flex-start}.wheel-section{justify-self:center}.contrast-checker,.gradient-builder,.image-layout{grid-template-columns:1fr}.palette-grid{grid-template-columns:repeat(4,1fr)}}@media (max-width:1024px){.analytics-grid{grid-template-columns:repeat(3,1fr)}.features-grid{grid-template-columns:repeat(2,1fr)}.wcag-compliance{grid-template-columns:1fr}.simulation-grid{grid-template-columns:repeat(2,1fr)}}@media (max-width:768px){.tool-container{padding:0 var(--space-md)}.hero{margin-top:-var(--space-lg);margin-bottom:var(--space-sm)}.hero-title{font-size:var(--font-size-lg)}.hero-description{font-size:var(--font-size-xs)}.content-wrapper{padding:var(--space-md)}.analytics-grid{grid-template-columns:repeat(2,1fr);gap:var(--space-sm)}.analytics-header{flex-direction:column;gap:var(--space-md);text-align:center}.reset-stats-btn{width:100%;justify-content:center}.features-grid{grid-template-columns:1fr;gap:var(--space-md)}.feature-card{padding:var(--space-lg)}.feature-icon{width:48px;height:48px;font-size:var(--font-size-lg)}.faq-question{padding:var(--space-lg)}.faq-answer-content{padding:0 var(--space-lg) var(--space-lg)}.usage-steps-horizontal{flex-direction:column;gap:var(--space-lg)}.step-arrow{transform:rotate(90deg);font-size:1.25rem}.step-icon{width:70px;height:70px}.picker-basic,.picker-pro{display:none}.picker-flat{display:flex}.mode-chip[data-mode=flat]{background:var(--color-primary);color:#fff}.color-picker-container{aspect-ratio:auto;max-width:none}.palette-grid{grid-template-columns:repeat(3,1fr)}.extracted-colors-grid{grid-template-columns:repeat(2,1fr)}.gradient-type-selector{grid-template-columns:1fr}.ratio-value{font-size:2.5rem}.preview-normal{font-size:14px}.preview-large{font-size:20px}.control-row{gap:var(--space-md)}.picker-controls{padding:var(--space-md)}#harmonyType,.harmony-select{min-width:140px}}@media (max-width:480px){.tool-container,.wide-container{padding:0 var(--space-sm)}.hero{padding:var(--space-xs) 0;margin-bottom:var(--space-sm);margin-top:-var(--space-xl)}.hero-title{font-size:var(--font-size-md)}.content-wrapper{padding:var(--space-sm)}.analytics-grid{grid-template-columns:repeat(2,1fr)}.analytics-card{padding:var(--space-sm);flex-direction:column;text-align:center}.analytics-icon{width:40px;height:40px;font-size:var(--font-size-md)}.features-grid{grid-template-columns:1fr;gap:var(--space-lg)}.faq-question{padding:var(--space-md)}.faq-question h3{font-size:var(--font-size-sm)}.step-icon{width:60px;height:60px}.mode-buttons{grid-template-columns:1fr}.palette-grid{grid-template-columns:repeat(2,1fr)}.color-formats{grid-template-columns:1fr}.harmony-buttons{flex-direction:column}.harmony-btn{width:100%}.format-row{grid-template-columns:1fr;gap:var(--space-xs)}.gradient-stop-item,.presets-grid{grid-template-columns:1fr}.control-row{flex-direction:column;gap:var(--space-sm);align-items:stretch}.picker-controls{padding:var(--space-sm)}.option-checkbox{width:100%;justify-content:flex-start}#harmonyType,.harmony-select{width:100%;min-width:unset}}@media (prefers-reduced-motion:reduce){*,::after,::before{animation-duration:0s!important;transition-duration:0s!important}}@media print{.btn,.faq-section,.favorites-sidebar,.global-toolbar,.history-sidebar,.tool-modal{display:none}body{background:#fff;color:#000}.page-layout{grid-template-columns:1fr}.analytics-card,.content-wrapper,.feature-card{border:1px solid #ccc;background:#fff;color:#000;break-inside:avoid}.hero-title,.section-header h2{color:#000}}.image-mode-container{display:flex;flex-direction:column;gap:var(--space-xl);margin-top:var(--space-xs)}.drop-zone-large{border:3px dashed rgba(255,255,255,.15);border-radius:var(--radius-xl);padding:var(--space-3xl);text-align:center;cursor:pointer;transition:transform .3s cubic-bezier(.4, 0, .2, 1),border-color .3s cubic-bezier(.4, 0, .2, 1);background:rgba(255,255,255,.12);position:relative;overflow:hidden;min-height:320px;display:flex;align-items:center;justify-content:center}.drop-zone-large::after{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(circle,var(--color-primary-light) 0,transparent 70%);opacity:0;transition:opacity var(--transition-normal);pointer-events:none}.drop-zone-large:hover{border-color:var(--color-primary);background:var(--glass-bg-hover)}.drop-zone-large:hover::after{opacity:1}.drop-zone-large.drag-over{border-color:var(--color-success);background:var(--glass-bg-hover)}.drop-zone-content{display:flex;flex-direction:column;align-items:center;gap:var(--space-lg);position:relative;z-index:1}.drop-icon{font-size:4rem;color:var(--color-primary);opacity:.8;animation:2s ease-in-out infinite dropPulse}@keyframes dropPulse{0%,100%{transform:translateY(0);opacity:.8}50%{transform:translateY(-10px);opacity:1}}.drop-title{font-size:var(--font-size-xl);font-weight:700;color:var(--text-primary);margin:0}.drop-subtitle{font-size:var(--font-size-base);color:var(--text-secondary);margin:0}.supported-formats{margin-top:var(--space-sm);display:flex;flex-wrap:wrap;gap:var(--space-sm);justify-content:center}.format-badge{padding:var(--space-xs) var(--space-sm);background:rgba(255,77,41,.1);border:1px solid var(--color-primary);border-radius:var(--radius-md);font-size:var(--font-size-xs);color:var(--color-primary);font-weight:600;text-transform:uppercase;letter-spacing:.5px}.image-workspace{display:flex;flex-direction:column;gap:var(--space-2xl);animation:.5s cubic-bezier(.4,0,.2,1) workspaceFadeIn}@keyframes workspaceFadeIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.settings-panel{padding:var(--space-lg) var(--space-md);padding-top:var(--space-xl);background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);border-radius:var(--radius-lg);position:relative}.advanced-settings-container{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.15);border-radius:var(--radius-lg);padding:var(--space-lg);max-width:750px;margin:0 auto}.workspace-left .advanced-settings-container{max-width:none;margin:0;padding:var(--space-md)}.advanced-settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-xl);align-items:stretch;position:relative}.advanced-settings-grid::before{content:'';position:absolute;left:50%;top:0;bottom:0;width:1px;background:var(--glass-border);transform:translateX(-50%)}.settings-section{display:flex;flex-direction:column;gap:var(--space-sm)}.quality-section{padding-right:var(--space-lg);gap:0}.options-section{padding-left:var(--space-lg)}.settings-section-header{display:flex;align-items:center;gap:var(--space-sm);font-size:11px;font-weight:600;color:var(--text-primary);text-transform:uppercase;letter-spacing:.5px;margin-bottom:var(--space-xs);border:none;padding-bottom:0}.settings-section-header i{color:var(--color-primary);font-size:11px}.quality-control{display:flex;align-items:center;gap:var(--space-sm)}.quality-slider{width:100%;height:6px;border-radius:var(--radius-full);background:linear-gradient(to right,var(--color-primary) 0,var(--color-primary) var(--slider-progress,25%),var(--color-dark-gray) var(--slider-progress,25%),var(--color-dark-gray) 100%);outline:0;-webkit-appearance:none}.quality-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:14px;height:14px;background:var(--color-primary);border-radius:50%;cursor:pointer;transition:transform .3s}.quality-slider::-webkit-slider-thumb:hover{transform:scale(1.2)}.quality-slider::-moz-range-thumb{width:14px;height:14px;background:var(--color-primary);border-radius:50%;cursor:pointer;border:none;transition:transform .3s}.quality-slider::-moz-range-thumb:hover{transform:scale(1.2)}.quality-value{font-size:var(--font-size-lg);color:var(--color-primary);font-weight:700}.options-grid{display:flex;flex-direction:row;flex-wrap:nowrap;gap:var(--space-md) var(--space-xl);align-items:center}.option-checkbox{display:flex;align-items:center;gap:var(--space-sm);cursor:pointer;color:var(--text-secondary);font-size:12px;font-weight:500;transition:transform .3s cubic-bezier(.4, 0, .2, 1)}.option-checkbox:hover{color:var(--color-white)}.option-checkbox input[type=checkbox]{display:none}.option-checkbox .checkbox-custom{width:18px;height:18px;background:rgba(255,255,255,.12);border:1px solid var(--color-gray);border-radius:var(--radius-sm);position:relative;transition:transform .3s cubic-bezier(.4, 0, .2, 1);flex-shrink:0}.option-checkbox .checkbox-custom::after{content:'✓';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(0);color:var(--color-white);font-size:12px;font-weight:700;transition:transform var(--transition-bounce)}.option-checkbox input[type=checkbox]:checked+.checkbox-custom{background:var(--color-primary);border-color:var(--color-primary)}.option-checkbox input[type=checkbox]:checked+.checkbox-custom::after{transform:translate(-50%,-50%) scale(1)}.option-checkbox .checkbox-label{user-select:none}@media (max-width:768px){.advanced-settings-container{padding:var(--space-md)}.advanced-settings-grid{grid-template-columns:1fr;gap:var(--space-md)}.advanced-settings-grid::before{display:none}.quality-section{padding-right:0}.options-section{padding-left:0}.settings-section-header{font-size:10px}.options-grid{flex-wrap:wrap;gap:var(--space-sm)}}.workspace-grid{display:grid;grid-template-columns:1fr 380px;gap:var(--space-2xl);align-items:stretch}.workspace-left{display:flex;flex-direction:column;gap:var(--space-lg);min-width:0;position:relative;z-index:2}.workspace-right{display:flex;flex-direction:column;gap:var(--space-lg);min-width:0;position:relative;z-index:1}.workspace-section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-md)}.header-actions{display:flex;gap:var(--space-xs);align-items:center}.workspace-section-header h4{font-size:14px;font-weight:700;color:var(--text-primary);display:flex;align-items:center;gap:var(--space-sm)}.workspace-section-header h4 i{color:var(--color-primary)}.action-btn-inline{width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.14);border:1px solid var(--glass-border);border-radius:var(--radius-lg);color:var(--text-primary);cursor:pointer;transition:transform .3s cubic-bezier(.4, 0, .2, 1);position:relative;font-size:var(--font-size-sm);overflow:hidden;contain:layout style;flex-shrink:0;transform:translateZ(0);-webkit-transform:translateZ(0)}.action-btn-inline:hover{transform:translate3d(0,-2px,0) scale3d(1.01,1.01,1);will-change:transform;border-color:rgba(255,77,41,.4);background:var(--glass-bg-hover)}#downloadBtnImageExtractor,.action-btn-blue{background:rgba(52,152,219,.12);border-color:rgba(52,152,219,.18);color:rgba(52,152,219,.9)}#downloadBtnImageExtractor:hover{background:rgba(52,152,219,.15);border-color:rgba(52,152,219,.25);color:#3498db}.action-btn-blue:hover{background:rgba(52,152,219,.15);border-color:rgba(52,152,219,.25);color:#3498db}.linear-reset-btn{background:rgba(231,76,60,.12);border-color:rgba(231,76,60,.18)}.linear-reset-btn:hover{color:#e74c3c}#downloadPaletteBtn{background:rgba(52,152,219,.12);border-color:rgba(52,152,219,.18);color:rgba(52,152,219,.9)}#downloadPaletteBtn:hover{background:rgba(52,152,219,.15);border-color:rgba(52,152,219,.25);color:#3498db}#savePalettePresetBtn,#savePresetBtn,.action-btn-star{background:rgba(255,193,7,.12);border-color:rgba(255,193,7,.18);color:rgba(255,193,7,.9)}#savePalettePresetBtn:hover,#savePresetBtn:hover,.action-btn-star:hover{background:rgba(255,193,7,.15);border-color:rgba(255,193,7,.25);color:#ffc107}#clearImageBtn{background:rgba(231,76,60,.12);border-color:rgba(231,76,60,.18);color:rgba(231,76,60,.9)}#clearImageBtn:hover{background:rgba(231,76,60,.15);border-color:rgba(231,76,60,.25);color:#e74c3c}.canvas-container{position:relative;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.15);border-radius:var(--radius-lg);overflow:visible;display:flex;align-items:center;justify-content:center}.extraction-settings-card{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.15);border-radius:var(--radius-xl);padding:var(--space-lg);display:flex;flex-direction:column;gap:var(--space-md)}.extraction-settings-card h4{font-size:var(--font-size-md);font-weight:700;color:var(--text-primary);display:flex;align-items:center;gap:var(--space-sm);margin-bottom:var(--space-sm)}.extraction-settings-card h4 i{color:var(--color-primary)}.btn-extract-large{width:100%;padding:var(--space-md) var(--space-xl);font-size:var(--font-size-md);font-weight:700}.selected-color-preview-card{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.15);border-radius:var(--radius-lg);padding:var(--space-md);animation:.4s cubic-bezier(.4,0,.2,1) selectedColorFadeIn}@keyframes selectedColorFadeIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.selected-color-header{margin-bottom:var(--space-sm)}.selected-color-header h4{font-size:var(--font-size-sm);font-weight:700;color:var(--text-primary);display:flex;align-items:center;gap:var(--space-xs)}.selected-color-header h4 i{color:var(--color-primary);font-size:var(--font-size-xs)}.selected-color-display{display:flex;gap:var(--space-md);align-items:center}.selected-color-swatch{width:80px;height:80px;border-radius:var(--radius-md);border:2px solid rgba(255,255,255,.2);flex-shrink:0}.selected-color-formats{flex:1;display:flex;flex-direction:column;gap:var(--space-xs)}.copy-icon-small{width:24px;height:24px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius-sm);color:var(--text-secondary);cursor:pointer;font-size:10px;transition:transform .2s cubic-bezier(.4, 0, .2, 1),background .2s,border-color .2s}.copy-icon-small:hover{transform:scale(1.1);background:rgba(255,77,41,.1);border-color:var(--color-primary);color:var(--color-primary)}.selected-color-pro{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.15);border-radius:var(--radius-lg);padding:var(--space-lg);margin-bottom:var(--space-lg)}.swatches-row-pro{display:flex;gap:var(--space-md);margin-bottom:var(--space-lg)}.swatch-box-pro{flex:1;display:flex;flex-direction:column;align-items:center;gap:var(--space-sm)}.swatch-large-pro{width:100%;height:70px;border-radius:var(--radius-md);border:2px solid rgba(255,255,255,.2);transition:transform .3s cubic-bezier(.4, 0, .2, 1)}.swatch-large-pro:hover{transform:translateY(-2px)}.swatch-label-pro{font-size:12px;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px}.formats-grid-pro{display:flex;flex-direction:column;gap:var(--space-sm)}.format-row-pro{display:flex;align-items:center;gap:var(--space-xs);background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.08);border-radius:var(--radius-lg);padding:4px var(--space-xs);min-height:28px}.format-label-pro{font-size:10px;font-weight:700;color:var(--text-secondary);text-transform:uppercase;width:42px;flex-shrink:0;padding-left:var(--space-xs);padding-right:var(--space-sm);border-right:1px solid rgba(255,255,255,.15);margin-right:var(--space-xs)}.format-input-pro{flex:1;background:0 0;border:none;color:var(--text-primary);font-size:11px;font-family:'Courier New',monospace;padding:0;outline:0}.copy-btn-pro{width:36px;height:36px;background:rgba(255,77,41,.1);border:1px solid rgba(255,77,41,.2);border-radius:var(--radius-lg);color:var(--color-primary);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .3s cubic-bezier(.4, 0, .2, 1),background .3s cubic-bezier(.4, 0, .2, 1),border-color .3s cubic-bezier(.4, 0, .2, 1);font-size:var(--font-size-sm);flex-shrink:0}.copy-btn-pro:hover{background:rgba(255,77,41,.2);border-color:rgba(255,77,41,.4);transform:scale(1.05)}.export-actions-inline{display:flex;gap:var(--space-sm)}.btn-export{width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius-lg);color:var(--text-secondary);font-size:var(--font-size-md);cursor:pointer;transition:transform .3s cubic-bezier(.4, 0, .2, 1),border-color .3s cubic-bezier(.4, 0, .2, 1);transform:translateZ(0)}.btn-export:hover{transform:translate3d(0,-2px,0) scale3d(1.05,1.05,1);border-color:var(--color-primary);background:rgba(255,77,41,.15);color:var(--color-primary)}#imageCanvas{max-width:100%;height:auto;display:block;border-radius:var(--radius-md);cursor:crosshair}.pixel-lupa{position:absolute;width:140px;height:180px;pointer-events:none;z-index:9999}.pixel-lupa canvas{width:140px;height:140px;border:3px solid #fff;border-radius:50%;display:block;image-rendering:pixelated;image-rendering:crisp-edges}.lupa-crosshair-center{position:absolute;top:70px;left:70px;width:4px;height:4px;background:red;border:1px solid #fff;border-radius:50%;transform:translate(-50%,-50%);z-index:10}.lupa-hex{position:absolute;top:145px;left:50%;transform:translateX(-50%);background:rgba(0,0,0,.95);color:#fff;padding:6px 12px;border-radius:var(--radius-full);font-size:11px;font-weight:700;white-space:nowrap}.k-means-settings{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius-lg);padding:var(--space-lg);display:flex;flex-direction:column;gap:var(--space-md)}.setting-row{display:flex;flex-direction:column;gap:var(--space-sm)}.setting-row label{font-size:var(--font-size-sm);font-weight:600;color:var(--text-primary);display:flex;justify-content:space-between;align-items:center}.range-slider{width:100%;height:6px;border-radius:var(--radius-full);background:rgba(255,255,255,.1);outline:0;-webkit-appearance:none}.range-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:var(--color-primary);cursor:pointer;transition:transform .2s}.range-slider::-webkit-slider-thumb:hover{transform:scale(1.2)}.range-slider::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--color-primary);cursor:pointer;border:none;transition:transform .2s}.range-slider::-moz-range-thumb:hover{transform:scale(1.2)}.extracted-colors-section{display:flex;flex-direction:column;gap:var(--space-lg)}.section-header-row{display:flex;justify-content:space-between;align-items:center}.section-label{font-size:11px;font-weight:600;color:var(--text-primary);text-transform:uppercase;letter-spacing:.5px;display:flex;align-items:center;gap:var(--space-sm);margin:0}.section-label i{color:var(--color-primary);font-size:11px}.gradient-export-section-compact h4.section-label,.gradient-stops-section-compact h4.section-label{font-size:11px;text-transform:uppercase;letter-spacing:.5px}.gradient-export-section-compact h4.section-label i,.gradient-stops-section-compact h4.section-label i{font-size:11px}.contrast-mode-container .section-label{font-size:11px;text-transform:uppercase;letter-spacing:.5px}.contrast-mode-container .section-label i{font-size:11px}.section-label-with-actions{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:var(--space-md)}.color-count{font-size:var(--font-size-sm);font-weight:500;color:var(--text-secondary);margin-left:var(--space-sm)}.section-actions{display:flex;gap:var(--space-sm)}.extracted-colors-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-sm);flex:1;align-content:start}.extracted-color-swatch{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius-md);padding:var(--space-xs);cursor:pointer;transition:transform .3s cubic-bezier(.4, 0, .2, 1),box-shadow .3s cubic-bezier(.4, 0, .2, 1),border-color .3s cubic-bezier(.4, 0, .2, 1);transform:translateZ(0);display:flex;flex-direction:column;gap:var(--space-xs);position:relative;overflow:hidden}.extracted-color-swatch::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:radial-gradient(circle at center,rgba(255,77,41,0) 0,rgba(255,77,41,.05) 100%);opacity:0;transition:opacity .3s;pointer-events:none}.extracted-color-swatch:hover::before{opacity:1}.extracted-color-swatch:hover{transform:translate3d(0,-3px,0) scale3d(1.02,1.02,1);border-color:var(--color-primary)}.swatch-preview{width:100%;height:70px;border-radius:var(--radius-sm);border:1px solid rgba(255,255,255,.2);transition:transform .3s cubic-bezier(.4, 0, .2, 1);position:relative;display:flex;align-items:flex-start;justify-content:flex-end;padding:var(--space-xs)}.extracted-color-swatch:hover .swatch-preview{transform:scale(1.02)}.manual-badge{position:absolute;top:var(--space-xs);left:var(--space-xs);background:rgba(255,193,7,.95);color:rgba(0,0,0,.9);padding:2px 6px;border-radius:var(--radius-full);font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;z-index:5}.swatch-hex{text-align:center;font-size:var(--font-size-sm);font-weight:700;color:var(--text-primary);font-family:'Courier New',monospace;letter-spacing:.5px;text-transform:uppercase}.extracted-color-swatch.copied{animation:2s cubic-bezier(.4,0,.2,1) swatchCopied}@keyframes swatchCopied{0%,100%{transform:translate3d(0,0,0) scale3d(1,1,1);background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.1)}20%{transform:translate3d(0,-6px,0) scale3d(1.08,1.08,1);background:rgba(39,174,96,.25);border-color:#27ae60;box-shadow:0 16px 40px rgba(39,174,96,.5)}50%{transform:translate3d(0,-4px,0) scale3d(1.05,1.05,1);background:rgba(39,174,96,.2);border-color:#27ae60;box-shadow:0 12px 32px rgba(39,174,96,.4)}}.action-badges{position:absolute;top:60%;left:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:var(--space-xs);z-index:10;pointer-events:none}.extracted-color-swatch .selected-badge{transform:scale(0);background:rgba(255,193,7,.95);color:rgba(0,0,0,.9);padding:4px 10px;border-radius:var(--radius-full);font-size:10px;font-weight:700;display:flex;align-items:center;gap:4px;white-space:nowrap}.extracted-color-swatch.copied .selected-badge{animation:2s cubic-bezier(.68,-.55,.265,1.55) badgePopSelected}.extracted-color-swatch.selected .selected-badge{transform:scale(1);opacity:1}.extracted-color-swatch.selected.copied .selected-badge{animation:2s cubic-bezier(.68,-.55,.265,1.55) badgePopSelected}.extracted-color-swatch .copied-badge{transform:scale(0);background:rgba(39,174,96,.95);color:#fff;padding:4px 10px;border-radius:var(--radius-full);font-size:10px;font-weight:700;display:flex;align-items:center;gap:4px;white-space:nowrap}.extracted-color-swatch.copied .copied-badge{animation:2s cubic-bezier(.68,-.55,.265,1.55) badgePopCopied}@keyframes badgePopSelected{0%,100%{transform:scale(0);opacity:0}15%{transform:scale(1.15);opacity:1}30%,85%{transform:scale(1);opacity:1}}@keyframes badgePopCopied{0%,10%,100%{transform:scale(0);opacity:0}25%{transform:scale(1.15);opacity:1}40%,85%{transform:scale(1);opacity:1}}.delete-color-btn{position:absolute;top:4px;right:4px;width:24px;height:24px;background:rgba(231,76,60,.95);border:none;border-radius:50%;color:#fff;font-size:10px;display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:0;transform:scale(.8);transition:opacity .2s,transform .2s,background .2s;z-index:10;box-shadow:0 2px 8px rgba(0,0,0,.3)}.extracted-color-swatch:hover .delete-color-btn{opacity:1;transform:scale(1)}.delete-color-btn:hover{background:#c0392b;transform:scale(1.1)}.color-card{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.15);border-radius:var(--radius-lg);padding:var(--space-sm);display:flex;flex-direction:column;gap:var(--space-xs);transition:transform .3s cubic-bezier(.4, 0, .2, 1),box-shadow .3s cubic-bezier(.4, 0, .2, 1);transform:translateZ(0);cursor:pointer}.color-card:hover{transform:translate3d(0,-4px,0) scale3d(1.02,1.02,1);box-shadow:0 8px 24px rgba(255,77,41,.2)}.color-swatch{width:100%;height:80px;border-radius:var(--radius-md);border:1px solid rgba(255,255,255,.2)}.color-hex{text-align:center;font-size:var(--font-size-xs);font-weight:600;color:var(--text-primary);font-family:'Courier New',monospace}.export-actions{display:flex;gap:var(--space-sm);flex-wrap:wrap}.palette-mode-container{display:flex;flex-direction:column;gap:var(--space-xl)}.add-color-section{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.15);border-radius:var(--radius-xl);padding:var(--space-xl);display:flex;flex-direction:column;gap:var(--space-lg)}.color-input-row{display:flex;gap:var(--space-md);align-items:center}.color-picker-input{border-radius:var(--radius-md);background:0 0}.color-picker-input:hover{transform:scale(1.05)}.hex-input{flex:1;height:48px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.15);border-radius:var(--radius-md);padding:0 var(--space-md);color:var(--text-primary);font-size:var(--font-size-base);font-weight:600;font-family:'Courier New',monospace;outline:0;transition:border-color .3s,box-shadow .3s}.hex-input:focus{border-color:var(--color-primary);box-shadow:0 0 0 2px rgba(255,77,41,.1)}.palette-colors-section{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.15);border-radius:var(--radius-xl);padding:var(--space-xl);display:flex;flex-direction:column;gap:var(--space-lg)}.palette-colors-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:var(--space-lg);min-height:200px}.palette-color-card{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.15);border-radius:var(--radius-lg);transform:translateZ(0)}.palette-color-swatch{width:100%;height:100px;cursor:grab}.palette-color-info{padding:var(--space-sm);text-align:center}.palette-color-hex{font-size:var(--font-size-xs);font-weight:600;color:var(--text-primary);font-family:'Courier New',monospace}.palette-color-actions{position:absolute;top:var(--space-xs);right:var(--space-xs);display:flex;gap:var(--space-xs);opacity:0;transition:opacity .3s}.palette-color-card:hover .palette-color-actions{opacity:1}.palette-action-btn{width:28px;height:28px;background:rgba(0,0,0,.7);border:1px solid rgba(255,255,255,.2);border-radius:var(--radius-lg);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:var(--font-size-xs);transition:background .2s}.palette-action-btn:hover{background:var(--color-primary)}.harmony-generator-section{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.15);border-radius:var(--radius-xl);padding:var(--space-xl);display:flex;flex-direction:column;gap:var(--space-lg)}.harmony-buttons-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--space-md)}.export-section{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.15);border-radius:var(--radius-xl);padding:var(--space-xl)}.export-buttons-row{display:flex;gap:var(--space-md);flex-wrap:wrap}.gradient-mode-container{display:flex;flex-direction:column;gap:var(--space-xl);margin-top:var(--space-xs)}.gradient-settings-layout{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-lg);width:100%;margin-bottom:var(--space-lg)}.gradient-settings-panel{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.15);border-radius:var(--radius-lg);padding:var(--space-md);display:flex;flex-direction:column}.gradient-settings-panel .section-label{font-size:11px;font-weight:600;color:var(--text-primary);display:flex;align-items:center;gap:var(--space-xs);margin-bottom:0;text-transform:uppercase;letter-spacing:.5px}.gradient-settings-panel .section-label i{color:var(--color-primary);font-size:11px}.gradient-settings-panel .section-header-row{min-height:36px;display:flex;align-items:flex-start;justify-content:space-between}.gradient-type-section{display:flex;flex-direction:column;gap:var(--space-sm)}.type-buttons-row{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-sm)}.type-btn-pro{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-xs);padding:var(--space-sm);background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.15);border-radius:var(--radius-lg);color:var(--text-secondary);font-size:var(--font-size-xs);font-weight:600;cursor:pointer;transition:background-color .2s,border-color .2s,color .2s;text-transform:uppercase;letter-spacing:.5px}.type-btn-pro i{font-size:var(--font-size-sm)}.type-btn-pro:hover{background:rgba(255,77,41,.15);border-color:var(--color-primary);color:var(--color-white)}.type-btn-pro.active{background:rgba(25,111,61,.15);border-color:#196f3d;color:#fff}.type-btn-pro.active:hover{background:rgba(25,111,61,.5);border-color:rgba(255,255,255,.15);color:var(--color-white)}.gradient-angle-section{display:flex;flex-direction:column;margin-top:var(--space-md);padding-top:var(--space-md);border-top:1px solid var(--color-dark-gray);transition:opacity .3s}.gradient-angle-section.disabled{opacity:.4;pointer-events:none}.gradient-angle-section.disabled .angle-dial-svg-pro,.gradient-angle-section.disabled .quick-angle-btn,.gradient-angle-section.disabled .section-label{cursor:not-allowed}.angle-controls-row{display:grid;grid-template-columns:auto 1fr;gap:var(--space-md);align-items:center}.angle-dial-wrapper{display:flex;align-items:center;justify-content:center}.angle-dial-svg-pro{cursor:grab;user-select:none;transition:transform .2s}.angle-dial-svg-pro:active{cursor:grabbing}.angle-dial-svg-pro:hover{transform:scale(1.05)}.quick-angles-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-xs)}.quick-angle-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-xs);padding:var(--space-sm);background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius-lg);color:var(--text-secondary);cursor:pointer;transition:background-color .2s cubic-bezier(.4, 0, .2, 1),border-color .2s cubic-bezier(.4, 0, .2, 1),color .2s cubic-bezier(.4, 0, .2, 1),transform .2s cubic-bezier(.4, 0, .2, 1)}.quick-angle-btn .angle-value{font-size:var(--font-size-xs);font-weight:700}.quick-angle-btn .angle-icon{font-size:var(--font-size-sm);opacity:.6}.quick-angle-btn:hover{background:rgba(255,255,255,.08);border-color:var(--color-primary);color:var(--color-primary);transform:translateY(-1px)}.quick-angle-btn.active{background:rgba(255,77,41,.15);border-color:var(--color-primary);color:var(--color-primary)}.gradient-section-divider{height:1px;background:rgba(255,255,255,.1);margin:var(--space-md) 0}.gradient-presets-section{display:flex;flex-direction:column;gap:var(--space-sm)}.btn-browse-library{width:100%;display:flex;align-items:center;justify-content:center;gap:var(--space-sm);padding:var(--space-md);background:var(--color-primary);border:1px solid var(--color-primary);border-radius:var(--radius-lg);color:#fff;font-size:var(--font-size-sm);font-weight:700;cursor:pointer;transition:background-color .2s cubic-bezier(.4, 0, .2, 1),border-color .2s cubic-bezier(.4, 0, .2, 1),transform .2s cubic-bezier(.4, 0, .2, 1);text-transform:uppercase;letter-spacing:.5px}.btn-browse-library i{font-size:var(--font-size-md)}.btn-browse-library:hover{background:var(--color-primary-dark);border-color:var(--color-primary-dark);transform:translateY(-2px)}.presets-divider{display:flex;align-items:center;justify-content:center;position:relative;margin:var(--space-xs) 0}.presets-divider::after,.presets-divider::before{content:'';flex:1;height:1px;background:rgba(255,255,255,.1)}.presets-divider span{padding:0 var(--space-sm);font-size:var(--font-size-xs);color:var(--text-secondary);text-transform:uppercase;letter-spacing:1px}.presets-row{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-xs)}.preset-btn-mini{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-xs);padding:var(--space-sm);background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius-lg);color:var(--text-secondary);cursor:pointer;transition:background-color .2s cubic-bezier(.4, 0, .2, 1),border-color .2s cubic-bezier(.4, 0, .2, 1),color .2s cubic-bezier(.4, 0, .2, 1),transform .2s cubic-bezier(.4, 0, .2, 1)}.preset-btn-mini i{font-size:var(--font-size-sm);opacity:.6}.preset-btn-mini .preset-label{font-size:var(--font-size-xs);font-weight:700}.preset-btn-mini:hover{background:rgba(255,255,255,.08);border-color:var(--color-primary);color:var(--color-primary);transform:translateY(-1px)}.preset-btn-mini:hover i{opacity:1}.gradient-main-content{display:grid;grid-template-columns:2fr 1fr;gap:var(--space-xl)}.gradient-preview-section{display:flex;flex-direction:column}.gradient-preview-large{width:100%;min-height:500px;border-radius:var(--radius-xl);background:linear-gradient(90deg,#ff4d29,#e64024);overflow:hidden;transition:background .5s}.gradient-sidebar{display:flex;flex-direction:column;gap:var(--space-lg);height:100%}.gradient-export-section-compact,.gradient-stops-section-compact{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.15);border-radius:var(--radius-lg);padding:var(--space-sm) var(--space-lg) var(--space-lg) var(--space-lg);display:flex;flex-direction:column;gap:var(--space-xs)}.gradient-export-section-top{display:flex;flex-direction:column;gap:var(--space-sm)}.textarea-with-copy{position:relative}.textarea-with-copy .css-code-textarea-compact{padding-right:48px}.textarea-with-copy .format-copy-compact{position:absolute;right:6px;top:6px;width:32px;height:32px}.gradient-export-section-top .css-code-textarea-compact{min-height:90px;height:auto;resize:none;overflow:hidden;field-sizing:content}.gradient-actions-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:var(--space-md);margin-top:var(--space-md)}.btn-gradient-action{display:flex;align-items:center;justify-content:center;gap:var(--space-sm);padding:var(--space-md);border-radius:var(--radius-lg);font-size:var(--font-size-sm);font-weight:700;cursor:pointer;transition:background-color .2s cubic-bezier(.4, 0, .2, 1),border-color .2s cubic-bezier(.4, 0, .2, 1),transform .2s cubic-bezier(.4, 0, .2, 1);text-transform:uppercase;letter-spacing:.5px}.btn-gradient-action i{font-size:var(--font-size-md)}.btn-gradient-primary{background:var(--color-primary);border:1px solid var(--color-primary);color:#fff}.btn-gradient-primary:hover{background:var(--color-primary-dark);border-color:var(--color-primary-dark);transform:translateY(-2px)}.btn-gradient-secondary{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);color:var(--text-primary)}.btn-gradient-secondary:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.25);transform:translateY(-2px)}.multipoint-section{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.15);border-radius:var(--radius-lg);padding:var(--space-lg);display:flex;flex-direction:column;gap:var(--space-md);flex:1;min-height:450px}.multipoint-section .section-label{display:flex;align-items:center;gap:var(--space-sm);font-size:11px;text-transform:uppercase;letter-spacing:.5px}.multipoint-canvas-container{display:flex;flex-direction:column;gap:var(--space-sm);flex:1}.multipoint-canvas{position:relative;width:100%;flex:1;min-height:350px;background:rgba(0,0,0,.3);border:1px solid rgba(255,255,255,.15);border-radius:var(--radius-md);cursor:crosshair;overflow:hidden}.multipoint-hint{font-size:var(--font-size-xs);color:var(--text-secondary);user-select:none;margin-top:var(--space-sm);font-size:var(--font-size-xs);color:var(--text-secondary);text-align:center}.multipoint-hint .hint-dot{color:var(--color-primary);font-weight:700}.multipoint-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:20px 20px;pointer-events:none}.multipoint-points-overlay{position:absolute;inset:0;pointer-events:none}.multipoint-point{position:absolute;width:24px;height:24px;border-radius:50%;border:2px solid rgba(255,255,255,.9);transform:translate(-50%,-50%);cursor:move;pointer-events:auto;transition:transform .15s cubic-bezier(.4, 0, .2, 1),border-color .15s cubic-bezier(.4, 0, .2, 1)}.multipoint-point:hover{transform:translate(-50%,-50%) scale(1.15);border-color:var(--color-primary)}.multipoint-point.active{border-color:var(--color-primary);transform:translate(-50%,-50%) scale(1.2)}.multipoint-point::after{content:'';position:absolute;top:50%;left:50%;width:6px;height:6px;background:rgba(255,255,255,.9);border-radius:50%;transform:translate(-50%,-50%)}.linear-stops-section{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.15);border-radius:var(--radius-lg);padding:var(--space-lg);display:flex;flex-direction:column;gap:var(--space-md);flex:1;min-height:450px}.linear-stops-section .section-label{display:flex;align-items:center;gap:var(--space-sm);font-size:11px;text-transform:uppercase;letter-spacing:.5px}.angle-badge{font-size:11px;font-weight:600;color:var(--color-primary);background:rgba(255,77,41,.15);padding:2px 8px;border-radius:var(--radius-sm);margin-left:var(--space-xs)}.angle-badge-input{width:36px;font-size:11px;font-weight:600;color:var(--color-primary);background:rgba(255,77,41,.15);border:1px solid transparent;padding:2px 4px;border-radius:var(--radius-sm);margin-left:var(--space-xs);text-align:center;outline:0;transition:border-color .2s,background .2s}.angle-badge-input:hover{background:rgba(255,77,41,.2)}.angle-badge-input:focus{border-color:var(--color-primary);background:rgba(255,77,41,.25)}.angle-badge-suffix{font-size:11px;font-weight:600;color:var(--color-primary);margin-left:1px}.linear-stops-canvas-container{display:flex;flex-direction:column;gap:var(--space-sm);flex:1}.linear-stops-canvas{position:relative;width:100%;flex:1;min-height:350px;background:rgba(0,0,0,.3);border:1px solid rgba(255,255,255,.15);border-radius:var(--radius-md);overflow:hidden;cursor:crosshair}.linear-stops-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:20px 20px;pointer-events:none}.linear-stops-svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.linear-stops-overlay{position:absolute;inset:0;pointer-events:none}.linear-stop-point{position:absolute;width:28px;height:28px;border-radius:50%;border:3px solid rgba(255,255,255,.95);transform:translate(-50%,-50%);cursor:move;pointer-events:auto;transition:transform .15s cubic-bezier(.4, 0, .2, 1),border-color .15s cubic-bezier(.4, 0, .2, 1);z-index:10}.linear-stop-point:hover{transform:translate(-50%,-50%) scale(1.15);border-color:var(--color-primary)}.linear-stop-point.active{border-color:var(--color-primary);transform:translate(-50%,-50%) scale(1.2);z-index:20}.linear-stop-point.dragging{transform:translate(-50%,-50%) scale(1.25);z-index:30}.linear-stop-point.first::after,.linear-stop-point.last::after{content:'';position:absolute;width:8px;height:8px;background:#fff;border-radius:50%;top:50%;left:50%;transform:translate(-50%,-50%)}.linear-stops-hint{font-size:var(--font-size-xs);color:var(--text-secondary);text-align:center}.linear-stops-hint .hint-dot{color:var(--color-primary);font-weight:700}.linear-reset-btn{color:#e74c3c!important}.linear-reset-btn:hover{background:rgba(231,76,60,.15)!important;border-color:#e74c3c!important}.radial-stops-section{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.15);border-radius:var(--radius-lg);padding:var(--space-lg);display:flex;flex-direction:column;gap:var(--space-md)}.radial-stops-section .section-label{display:flex;align-items:center;gap:var(--space-sm);font-size:11px;text-transform:uppercase;letter-spacing:.5px}.radial-stops-canvas-container{display:flex;flex-direction:column;gap:var(--space-sm)}.radial-stops-canvas{position:relative;width:100%;height:200px;background:rgba(0,0,0,.3);border:1px solid rgba(255,255,255,.15);border-radius:var(--radius-md);overflow:hidden;cursor:crosshair}.radial-stops-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:20px 20px;pointer-events:none}.radial-stops-svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.radial-stops-overlay{position:absolute;inset:0;pointer-events:none}.radial-center-point{position:absolute;width:32px;height:32px;border-radius:50%;background:rgba(255,77,41,.3);border:3px solid var(--color-primary);transform:translate(-50%,-50%);cursor:move;pointer-events:auto;transition:transform .15s cubic-bezier(.4, 0, .2, 1),border-color .15s cubic-bezier(.4, 0, .2, 1);z-index:20}.radial-center-point::before{content:'';position:absolute;width:8px;height:8px;background:var(--color-primary);border-radius:50%;top:50%;left:50%;transform:translate(-50%,-50%)}.radial-center-point:hover{transform:translate(-50%,-50%) scale(1.15)}.radial-center-point.dragging{transform:translate(-50%,-50%) scale(1.25);z-index:30}.radial-stop-point{position:absolute;width:24px;height:24px;border-radius:50%;border:3px solid rgba(255,255,255,.95);transform:translate(-50%,-50%);cursor:move;pointer-events:auto;transition:transform .15s cubic-bezier(.4, 0, .2, 1),border-color .15s cubic-bezier(.4, 0, .2, 1);z-index:10}.radial-stop-point:hover{transform:translate(-50%,-50%) scale(1.15);border-color:var(--color-primary)}.radial-stop-point.active{border-color:var(--color-primary);transform:translate(-50%,-50%) scale(1.2);z-index:15}.radial-stop-point.dragging{transform:translate(-50%,-50%) scale(1.25);z-index:25}.radial-stops-hint{font-size:var(--font-size-xs);color:var(--text-secondary);text-align:center}.radial-stops-hint .hint-dot{color:var(--color-primary);font-weight:700}.conic-stops-section{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.15);border-radius:var(--radius-lg);padding:var(--space-lg);display:flex;flex-direction:column;gap:var(--space-md)}.conic-stops-section .section-label{display:flex;align-items:center;gap:var(--space-sm);font-size:11px;text-transform:uppercase;letter-spacing:.5px}.conic-stops-canvas-container{display:flex;flex-direction:column;gap:var(--space-sm)}.conic-stops-canvas{position:relative;width:100%;height:200px;background:rgba(0,0,0,.3);border:1px solid rgba(255,255,255,.15);border-radius:var(--radius-md);overflow:hidden;cursor:crosshair}.conic-stops-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:20px 20px;pointer-events:none}.conic-stops-svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.conic-stops-overlay{position:absolute;inset:0;pointer-events:none}.conic-center-point{position:absolute;width:32px;height:32px;border-radius:50%;background:rgba(255,77,41,.3);border:3px solid var(--color-primary);transform:translate(-50%,-50%);cursor:move;pointer-events:auto;transition:transform .15s cubic-bezier(.4, 0, .2, 1),border-color .15s cubic-bezier(.4, 0, .2, 1);z-index:20}.conic-center-point::before{content:'';position:absolute;width:8px;height:8px;background:var(--color-primary);border-radius:50%;top:50%;left:50%;transform:translate(-50%,-50%)}.conic-center-point:hover{transform:translate(-50%,-50%) scale(1.15)}.conic-center-point.dragging{transform:translate(-50%,-50%) scale(1.25);z-index:30}.conic-stops-hint{font-size:var(--font-size-xs);color:var(--text-secondary);text-align:center}.conic-stops-hint .hint-dot{color:var(--color-primary);font-weight:700}.conic-angle-handle{position:absolute;width:20px;height:20px;border-radius:50%;background:var(--color-primary);border:2px solid rgba(255,255,255,.9);transform:translate(-50%,-50%);cursor:grab;pointer-events:auto;transition:transform .1s cubic-bezier(.4, 0, .2, 1);z-index:25}.conic-angle-handle:hover{transform:translate(-50%,-50%) scale(1.2)}.conic-angle-handle.dragging{cursor:grabbing;transform:translate(-50%,-50%) scale(1.3)}.export-format-selector-compact{display:flex;gap:var(--space-xs);padding:var(--space-sm);background:rgba(255,255,255,.14);border-radius:var(--radius-md)}.export-format-btn-compact{flex:1;display:flex;align-items:center;justify-content:center;padding:var(--space-sm);background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius-lg);color:var(--text-secondary);font-size:var(--font-size-sm);cursor:pointer;transition:background-color .2s cubic-bezier(.4, 0, .2, 1),border-color .2s cubic-bezier(.4, 0, .2, 1),color .2s cubic-bezier(.4, 0, .2, 1),transform .2s cubic-bezier(.4, 0, .2, 1)}.export-format-btn-compact:hover{background:rgba(255,255,255,.08);border-color:var(--color-primary);color:var(--color-primary);transform:translateY(-1px)}.export-format-btn-compact.active{background:rgba(255,77,41,.15);border-color:var(--color-primary);color:var(--color-primary)}.css-code-textarea-compact{width:100%;min-height:150px;padding:var(--space-md);background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius-md);color:var(--text-primary);font-family:'Courier New',monospace;font-size:var(--font-size-xs);resize:vertical;outline:0}.css-code-textarea-compact:focus{border-color:var(--color-primary)}.export-quick-actions{display:flex;gap:var(--space-sm)}.btn-compact{flex:1;display:flex;align-items:center;justify-content:center;gap:var(--space-xs);padding:var(--space-sm) var(--space-md);border-radius:var(--radius-lg);font-size:var(--font-size-sm);font-weight:600;cursor:pointer;transition:background-color .2s cubic-bezier(.4, 0, .2, 1),transform .2s cubic-bezier(.4, 0, .2, 1);border:none}.btn-compact-primary{background:var(--color-primary);color:#fff}.btn-compact-primary:hover{background:var(--color-primary-dark);transform:translateY(-2px)}.btn-compact-secondary{background:rgba(255,255,255,.14);color:var(--text-primary);border:1px solid rgba(255,255,255,.2)}.btn-compact-secondary:hover{background:rgba(255,255,255,.15);transform:translateY(-2px)}.export-format-selector{display:flex;gap:var(--space-sm);padding:var(--space-sm);background:rgba(0,0,0,.2);border-radius:var(--radius-md)}@media (max-width:768px){.export-format-selector{flex-wrap:wrap}.export-format-btn{flex:1 1 calc(50% - var(--space-xs));min-width:100px}.export-format-btn span{display:none}.export-format-btn i,.export-format-btn svg{font-size:var(--font-size-lg)}}.type-buttons-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-sm)}.angle-dial-container{display:flex;flex-direction:column;align-items:center;gap:var(--space-lg);padding:var(--space-lg)}.angle-dial-svg{cursor:grab;user-select:none;transition:transform .2s}.angle-dial-svg:active{cursor:grabbing}.angle-dial-svg:hover{transform:scale(1.05)}.quick-angles{display:flex;flex-wrap:wrap;gap:var(--space-sm);justify-content:center}.visual-gradient-slider-container{display:flex;flex-direction:column;gap:var(--space-xs)}.gradient-slider-track{position:relative;width:100%;height:48px}.gradient-slider-bar{position:absolute;top:50%;transform:translateY(-50%);width:100%;height:40px;border-radius:var(--radius-md);cursor:crosshair}.gradient-stops-overlay{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}.gradient-stop-handle{position:absolute;top:50%;transform:translate(-50%,-50%);width:20px;height:32px;background:#fff;border:3px solid var(--color-primary);border-radius:var(--radius-sm);cursor:grab;pointer-events:all;transition:transform .2s cubic-bezier(.4, 0, .2, 1);z-index:10}.gradient-stop-handle:hover{transform:translate(-50%,-50%) scale(1.15);z-index:20}.gradient-stop-handle.dragging{cursor:grabbing;transform:translate(-50%,-50%) scale(1.2);z-index:100}.gradient-stop-handle::before{content:'';position:absolute;inset:4px;border-radius:2px;background:var(--stop-color,#ff4d29)}.gradient-stop-position-label{position:absolute;bottom:100%;left:50%;transform:translateX(-50%);margin-bottom:4px;padding:2px 6px;background:rgba(0,0,0,.8);border-radius:var(--radius-sm);font-size:10px;font-weight:600;color:#fff;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .2s}.gradient-stop-handle.dragging .gradient-stop-position-label,.gradient-stop-handle:hover .gradient-stop-position-label{opacity:1}.gradient-stop-delete-btn{position:absolute;top:-8px;right:-8px;width:18px;height:18px;background:#e74c3c;border:2px solid #fff;border-radius:50%;color:#fff;font-size:10px;display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:0;transform:scale(.8);transition:opacity .2s,transform .2s,background .2s;pointer-events:all;z-index:1}.gradient-stop-handle:hover .gradient-stop-delete-btn{opacity:1;transform:scale(1)}.gradient-stop-delete-btn:hover{background:#c0392b;transform:scale(1.1)}.slider-position-labels{display:flex;justify-content:space-between;padding:0 4px;font-size:var(--font-size-xs);color:var(--text-secondary);user-select:none}.slider-hint-text{font-size:var(--font-size-xs);color:var(--text-secondary);text-align:center;user-select:none;margin-top:var(--space-sm)}.slider-hint-text .hint-dot{color:var(--color-primary);font-weight:700}.preset-buttons-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-sm)}.css-code-textarea{width:100%;min-height:120px;background:rgba(0,0,0,.3);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius-md);padding:var(--space-md);color:var(--text-primary);font-family:'Courier New',monospace;font-size:var(--font-size-sm);resize:vertical;outline:0}@media (max-width:1024px){.gradient-main-content{grid-template-columns:1fr}.gradient-preview-large{min-height:350px}.gradient-stop-delete-btn{opacity:1!important;transform:scale(1)!important;transition:none}}@media (max-width:768px){.gradient-top-controls{gap:var(--space-md)}.gradient-control-group{flex:1 1 calc(50% - var(--space-md));min-width:140px}.control-label{font-size:10px}.gradient-preview-large{min-height:300px}.css-code-textarea-compact{min-height:120px;font-size:10px}}@media (max-width:480px){.gradient-top-controls{flex-direction:column;gap:var(--space-sm)}.gradient-control-group{flex:1 1 100%;min-width:auto}.action-btn-compact,.preset-btn-compact,.type-btn-compact{width:36px;height:36px}.angle-dial-svg-compact{width:60px;height:60px}.gradient-preview-large{min-height:250px}.quick-angle-btn-compact{font-size:10px;padding:4px 6px}.btn-compact{font-size:11px;padding:var(--space-xs) var(--space-sm)}.btn-compact span{display:none}.btn-compact i{margin:0}}.contrast-mode-container{display:flex;flex-direction:column;gap:var(--space-2xl);margin-top:var(--space-xs)}.contrast-controls-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-xl)}.contrast-panel-wrapper{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.15);border-radius:var(--radius-lg);padding:var(--space-md);display:flex;flex-direction:column;gap:var(--space-md)}.contrast-colors-section{display:flex;flex-direction:column}.colors-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-md);align-items:start}.color-input-block{display:flex;flex-direction:column;gap:var(--space-sm)}.color-label{font-size:var(--font-size-xs);font-weight:700;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px}.color-picker-input{width:100%;height:60px;border-radius:var(--radius-md);border:1px solid rgba(255,255,255,.15);cursor:pointer;background:var(--glass-bg);transition:border-color .2s cubic-bezier(.4, 0, .2, 1),transform .2s cubic-bezier(.4, 0, .2, 1)}.color-picker-input:hover{border-color:var(--color-primary);transform:translateY(-1px)}.hex-input-compact{padding:var(--space-sm) var(--space-md);background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.15);border-radius:var(--radius-md);color:var(--text-primary);font-family:var(--font-mono);font-size:var(--font-size-sm);font-weight:600;text-align:center;outline:0;transition:border-color .2s cubic-bezier(.4, 0, .2, 1),background-color .2s cubic-bezier(.4, 0, .2, 1)}.hex-input-compact:focus{border-color:var(--color-primary);background:rgba(255,77,41,.1)}.hex-input-row{display:flex;gap:var(--space-xs)}.hex-input-row .hex-input-compact{flex:1}.copy-hex-btn{width:36px;height:36px;background:rgba(255,77,41,.1);border:1px solid rgba(255,77,41,.2);border-radius:var(--radius-lg);color:var(--color-primary);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:var(--font-size-sm);transition:transform .3s cubic-bezier(.4, 0, .2, 1),background .3s cubic-bezier(.4, 0, .2, 1),border-color .3s cubic-bezier(.4, 0, .2, 1);flex-shrink:0}.copy-hex-btn:hover{background:rgba(255,77,41,.2);border-color:rgba(255,77,41,.4);transform:scale(1.05)}.color-picker-wrapper{position:relative;width:100%}.color-badge{position:absolute;top:var(--space-xs);left:var(--space-xs);z-index:2;font-size:10px;font-weight:700;color:var(--text-primary);background:rgba(3,16,36,.85);padding:3px 8px;border-radius:var(--radius-sm);text-transform:uppercase;letter-spacing:.5px;pointer-events:none}.hex-input-with-copy{position:relative;width:100%}.hex-input-full{width:100%;padding:var(--space-sm) var(--space-md);padding-right:40px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.15);border-radius:var(--radius-md);color:var(--text-primary);font-family:var(--font-mono);font-size:var(--font-size-sm);font-weight:600;text-align:center;outline:0;transition:border-color .2s cubic-bezier(.4, 0, .2, 1),background-color .2s cubic-bezier(.4, 0, .2, 1)}.hex-input-full:focus{border-color:var(--color-primary);background:rgba(255,77,41,.1)}.copy-hex-btn-inside{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:28px;height:28px;background:rgba(255,77,41,.15);border:none;border-radius:var(--radius-sm);color:var(--color-primary);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:12px;transition:transform .2s cubic-bezier(.4, 0, .2, 1),background .2s cubic-bezier(.4, 0, .2, 1)}.copy-hex-btn-inside:hover{background:rgba(255,77,41,.25);transform:translateY(-50%) scale(1.08)}.text-size-section{display:flex;flex-direction:column}.slider-row{display:flex;align-items:center;gap:var(--space-md)}.size-input-wrapper{display:flex;align-items:center;gap:var(--space-xs);background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.15);border-radius:var(--radius-md);padding:0 var(--space-sm);height:36px;transition:border-color .2s cubic-bezier(.4, 0, .2, 1),background-color .2s cubic-bezier(.4, 0, .2, 1);transform:translateZ(0)}.size-input-wrapper:hover{border-color:rgba(255,77,41,.4);background:rgba(255,255,255,.08)}.size-input-wrapper:focus-within{border-color:var(--color-primary);background:rgba(255,77,41,.1)}.size-input{width:36px;height:100%;background:0 0;border:none;padding:0;font-size:var(--font-size-sm);font-weight:700;color:var(--color-primary);text-align:right}.size-input:focus{outline:0}.size-input::-webkit-inner-spin-button,.size-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.size-input[type=number]{-moz-appearance:textfield}.size-unit{font-size:var(--font-size-sm);font-weight:600;color:var(--color-primary);user-select:none}.colorblind-section{display:flex;flex-direction:column;padding-top:var(--space-sm);border-top:1px solid var(--color-dark-gray)}.colorblind-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-sm);margin-top:var(--space-sm)}.sim-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-xs);padding:var(--space-sm);background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.15);border-radius:var(--radius-lg);color:var(--text-secondary);font-size:var(--font-size-xs);font-weight:600;cursor:pointer;transition:background-color .2s cubic-bezier(.4, 0, .2, 1),border-color .2s cubic-bezier(.4, 0, .2, 1),color .2s cubic-bezier(.4, 0, .2, 1),transform .2s cubic-bezier(.4, 0, .2, 1);transform:translateZ(0)}.sim-btn i{font-size:var(--font-size-sm);color:var(--text-secondary)}.sim-btn:hover{background:rgba(255,255,255,.08);border-color:var(--color-primary);color:var(--color-primary);transform:translateY(-2px)}.sim-btn:hover i{opacity:1}.sim-btn.active{background:rgba(25,111,61,.15);border-color:#196f3d;color:#fff}.sim-btn.active i{color:#fff}.contrast-preview-grid{display:grid;grid-template-columns:2fr 1fr;gap:var(--space-xl);align-items:stretch}.contrast-preview-area{display:flex;flex-direction:column}.contrast-preview-box{background:#fff;color:#000;border-radius:var(--radius-xl);padding:var(--space-3xl);height:100%;display:flex;flex-direction:column;gap:var(--space-lg);transition:background-color .3s cubic-bezier(.4, 0, .2, 1),color .3s cubic-bezier(.4, 0, .2, 1)}.preview-heading{font-size:var(--font-size-3xl);font-weight:800;margin:0;line-height:1.2}.preview-paragraph{font-size:var(--font-size-base);line-height:1.7;margin:0}.preview-small-text{font-size:var(--font-size-sm);line-height:1.6;margin:0;opacity:.85}.contrast-results-sidebar{display:flex;flex-direction:column;gap:var(--space-lg)}.ratio-display-section{text-align:center;display:flex;flex-direction:column;gap:var(--space-sm)}.ratio-label{font-size:var(--font-size-xs);font-weight:700;color:var(--text-secondary);text-transform:uppercase;letter-spacing:1px}.ratio-value{font-size:3.5rem;font-weight:800;color:var(--color-primary);line-height:1}.ratio-status{font-size:var(--font-size-lg);font-weight:700;color:var(--text-primary)}.wcag-compliance-section{display:flex;flex-direction:column}.wcag-compliance-section .section-label{margin-bottom:var(--space-sm)}.wcag-badges-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-sm)}.wcag-badge{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.15);border-radius:var(--radius-md);padding:var(--space-md);display:flex;flex-direction:column;align-items:center;gap:var(--space-xs);transition:transform .3s cubic-bezier(.4, 0, .2, 1),border-color .3s cubic-bezier(.4, 0, .2, 1),background-color .3s cubic-bezier(.4, 0, .2, 1);transform:translateZ(0)}.wcag-badge.pass{background:rgba(25,111,61,.15);border-color:#196f3d;color:#fff}.wcag-badge.fail{border-color:rgba(231,76,60,.5);background:rgba(231,76,60,.08)}.wcag-badge:hover{transform:translate3d(0,-2px,0);border-color:var(--color-primary)}.badge-icon{font-size:var(--font-size-xl)}.wcag-badge.pass .badge-icon{color:#196f3d}.wcag-badge.fail .badge-icon{color:#e74c3c}.badge-label{font-size:var(--font-size-xs);font-weight:700;color:var(--text-primary);text-transform:uppercase;letter-spacing:.5px}.badge-requirement{font-size:var(--font-size-xs);color:var(--text-secondary);font-weight:500}.wcag-badge-mini{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:var(--radius-full);font-size:10px;font-weight:600;white-space:nowrap}.wcag-badge-mini.pass-aaa{background:#27ae60;color:#fff}.wcag-badge-mini.pass-aa{background:#f39c12;color:#fff}.wcag-badge-mini.fail{background:rgba(231,76,60,.85);color:#fff}.wcag-badge-mini i{font-size:9px}.fix-actions-row{display:flex;flex-direction:row;gap:var(--space-sm);margin-top:var(--space-md)}.btn-fix{flex:1;justify-content:center;border-radius:var(--radius-lg)}@media (max-width:1024px){.extraction-settings-card-top{grid-template-columns:1fr;gap:var(--space-md)}.workspace-grid{display:flex;flex-direction:column;gap:var(--space-lg)}.workspace-left{display:contents}.workspace-left .advanced-settings-container{order:1}.workspace-left .image-wrapper{order:2}.workspace-right{order:3}.contrast-controls-grid,.contrast-preview-grid,.gradient-mode-container{grid-template-columns:1fr}.colorblind-grid,.wcag-badges-grid{grid-template-columns:repeat(4,1fr)}.badge-label,.sim-btn span{font-size:10px}.wcag-badge{padding:var(--space-sm);gap:2px}.badge-icon{font-size:var(--font-size-base)}.badge-requirement{font-size:10px}.delete-color-btn{opacity:1;transform:scale(1)}.color-card-actions{opacity:1;transform:translateY(0)}.focus-copy-indicator,.focus-drag-handle,.focus-strip-actions{opacity:1}}@media (max-width:768px){.drop-zone-large{padding:var(--space-2xl);min-height:250px}.drop-icon{font-size:3rem}.extracted-colors-grid,.palette-colors-grid{grid-template-columns:repeat(auto-fill,minmax(80px,1fr))}.harmony-buttons-grid,.type-buttons-grid{grid-template-columns:1fr}.colorblind-grid,.wcag-badges-grid{grid-template-columns:repeat(2,1fr)}.colors-row{grid-template-columns:1fr 1fr;gap:var(--space-sm)}.color-input-block{min-width:0}.color-picker-wrapper{cursor:pointer}.color-picker-wrapper .color-picker-input{pointer-events:none}.hex-input-full{font-size:11px;padding:var(--space-sm) var(--space-sm);padding-right:36px;height:36px}.hex-input-with-copy{height:36px}.copy-hex-btn-inside{width:28px;height:28px;font-size:11px}.swap-btn-compact{margin-top:0}.export-buttons-row{flex-direction:column}.color-input-row{flex-direction:column;align-items:stretch}.slider-row{gap:var(--space-sm)}.slider-row .range-slider{flex:1;min-width:0}.size-input-wrapper{flex-shrink:0;min-width:70px}.size-input{width:32px}.contrast-preview-box{overflow:hidden}.preview-heading{overflow-wrap:break-word;word-break:break-word;hyphens:auto}.contrast-mode-container{gap:var(--space-md)}.contrast-panel-wrapper{padding:var(--space-sm)}.contrast-preview-grid,.contrast-results-sidebar{gap:var(--space-md)}}@media (max-width:480px){.drop-zone-large{padding:var(--space-xl);min-height:200px}.ratio-value{font-size:2.5rem}.preview-heading{font-size:var(--font-size-2xl)}.contrast-preview-box{padding:var(--space-xl);min-height:300px}}.tool-tabs{position:absolute;top:-44px;right:64px;display:flex;gap:var(--space-sm);z-index:5}.tool-tab{position:relative;width:44px;height:44px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.12);border-bottom:none;border-radius:var(--radius-lg) var(--radius-lg) 0 0;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform .3s cubic-bezier(.4, 0, .2, 1),background .3s cubic-bezier(.4, 0, .2, 1),border-color .3s cubic-bezier(.4, 0, .2, 1);transform:translateZ(0);-webkit-transform:translateZ(0)}.tool-tab i{font-size:18px;color:rgba(255,255,255,.6);transition:color .3s cubic-bezier(.4, 0, .2, 1)}.tool-tab:hover{background:rgba(255,255,255,.06);border-color:rgba(255,77,41,.3)}.tool-tab.active i,.tool-tab:hover i{color:var(--color-primary)}#historyTab,#historyTab i,#presetManagerTab,#presetManagerTab i{color:rgba(255,255,255,.6)}#historyTab:hover{background:rgba(52,152,219,.15);border-color:rgba(52,152,219,.3)}#historyTab:hover i{color:#3498db}#presetManagerTab:hover{background:rgba(255,193,7,.15);border-color:rgba(255,193,7,.3);color:#ffc107}#presetManagerTab.has-saved,#presetManagerTab.has-saved i,#presetManagerTab.has-saved:hover,#presetManagerTab.has-saved:hover i,#presetManagerTab:hover i{color:#ffc107}#favoriteTab.active i,#favoriteTab:hover i{color:#e74c3c}.palette-builder-container{display:flex;flex-direction:column;gap:24px;margin-top:var(--space-xs)}.palette-actions-bar{display:flex;justify-content:space-between;align-items:center;padding:16px;margin-top:24px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.08);border-radius:12px}.actions-left,.actions-right{display:flex;gap:12px;align-items:center}.actions-divider{color:rgba(255,255,255,.3);font-size:18px;font-weight:300;user-select:none}.format-selector{position:relative;display:flex;gap:0;padding:4px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.15);border-radius:var(--radius-lg)}.format-slider{position:absolute;top:4px;left:4px;width:calc(50% - 4px);height:calc(100% - 8px);background:#ff4d29;border-radius:var(--radius-md);transition:transform .4s cubic-bezier(.34, 1.56, .64, 1);pointer-events:none;z-index:0}.format-selector.rgb-active .format-slider{transform:translateX(100%)}.format-btn{position:relative;z-index:1;padding:6px 14px;background:0 0;border:none;border-radius:var(--radius-md);color:rgba(255,255,255,.6);font-size:12px;font-weight:600;font-family:Inter,sans-serif;cursor:pointer;transition:color .25s cubic-bezier(.4, 0, .2, 1);flex:1;text-align:center}.format-btn:hover{color:rgba(255,255,255,.9)}.format-btn.active{color:#fff}.action-btn-icon{display:flex;align-items:center;gap:8px;padding:var(--space-xs) var(--space-sm);background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.15);border-radius:var(--radius-lg);color:var(--text-secondary);font-size:var(--font-size-xs);font-weight:600;cursor:pointer;min-height:36px;transition:background-color .2s,border-color .2s,color .2s}.action-btn-icon:hover{background:rgba(255,77,41,.15);border-color:var(--color-primary);color:var(--color-white)}.action-btn-icon i{font-size:16px;color:#ff4d29}.action-btn-icon-only{display:flex;align-items:center;justify-content:center;width:36px;height:36px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);border-radius:var(--radius-lg);color:var(--text-secondary);font-size:14px;cursor:pointer;transition:background-color .2s,border-color .2s,color .2s}.action-btn-icon-only:hover{background:rgba(255,77,41,.15);border-color:var(--color-primary);color:var(--color-white)}.action-btn-icon-only:disabled{opacity:.3;cursor:not-allowed}.palette-colors-wrapper{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:16px;padding:20px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.08);border-radius:12px;min-height:200px}.palette-color-card{position:relative;height:200px;min-width:120px;border-radius:12px;cursor:grab;overflow:hidden;transition:transform .3s cubic-bezier(.4, 0, .2, 1)}.palette-color-card.palette-card-new{animation:.3s forwards paletteCardFadeIn}@keyframes paletteCardFadeIn{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}.palette-color-card:hover{transform:translate3d(0,-4px,0) scale3d(1.02,1.02,1)}.palette-color-card:active{cursor:grabbing}.drag-handle-left{position:absolute;top:8px;left:8px;opacity:0;transform:translateY(-8px);transition:opacity .2s cubic-bezier(.4, 0, .2, 1),transform .2s cubic-bezier(.4, 0, .2, 1)}.palette-color-card:hover .drag-handle-left{opacity:1;transform:translateY(0)}.color-card-actions{position:absolute;top:8px;right:8px;display:flex;gap:4px;opacity:0;transform:translateY(-8px);transition:opacity .2s cubic-bezier(.4, 0, .2, 1),transform .2s cubic-bezier(.4, 0, .2, 1)}.palette-color-card:hover .color-card-actions{opacity:1;transform:translateY(0)}.card-action-btn{display:flex;align-items:center;justify-content:center;width:26px;height:26px;background:rgba(0,0,0,.75);border:1px solid rgba(255,255,255,.2);border-radius:var(--radius-md);color:rgba(255,255,255,.92);font-size:11px;cursor:pointer;transition:background-color .2s cubic-bezier(.4, 0, .2, 1),border-color .2s cubic-bezier(.4, 0, .2, 1),color .2s cubic-bezier(.4, 0, .2, 1),transform .2s cubic-bezier(.4, 0, .2, 1)}.card-action-btn:hover{background:rgba(0,0,0,.8);border-color:#ff4d29;color:#ff4d29;transform:scale(1.1)}.color-card-hex{position:absolute;bottom:10px;left:10px;right:10px;display:flex;flex-direction:row;align-items:center;gap:8px;padding:8px 12px;background:rgba(0,0,0,.75);border:1px solid rgba(255,255,255,.2);border-radius:8px;cursor:pointer;transition:background-color .2s cubic-bezier(.4, 0, .2, 1),border-color .2s cubic-bezier(.4, 0, .2, 1),transform .2s cubic-bezier(.4, 0, .2, 1)}.color-card-hex:hover{background:rgba(0,0,0,.8);border-color:#ff4d29;transform:translateY(-2px)}.hex-text{display:flex;flex-direction:column;gap:2px}.hex-copy-icon{font-size:14px;color:rgba(255,255,255,.6);transition:color .2s}.color-card-hex:hover .hex-copy-icon{color:#ff4d29}.color-card-hex span{font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:rgba(255,255,255,.6);font-weight:600}.color-card-hex strong{font-size:13px;font-weight:700;color:rgba(255,255,255,.95);font-family:'Courier New',monospace}.palette-bottom-actions{display:flex;justify-content:space-between;align-items:center;padding:16px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);border-radius:12px}.action-link{display:flex;align-items:center;gap:8px;padding:8px 12px;background:0 0;border:none;color:rgba(255,255,255,.75);font-size:14px;font-weight:500;cursor:pointer;transition:color .2s cubic-bezier(.4, 0, .2, 1)}.action-link:hover{color:#ff4d29}.action-link i{font-size:16px}.sortable-ghost{opacity:.4;background:rgba(255,77,41,.1);border:2px dashed rgba(255,77,41,.5);transform:scale(.95)}.sortable-drag{opacity:1;cursor:grabbing!important;transform:rotate(3deg) scale(1.05);border:2px solid rgba(255,77,41,.5);z-index:1000}.drag-handle{cursor:grab}.drag-handle:active{cursor:grabbing}.palette-presets-section{padding:10px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.08);border-radius:12px}.presets-title{display:flex;align-items:center;gap:10px;margin:0 0 20px;font-size:14px;font-weight:700;color:rgba(255,255,255,.92)}.presets-title i{color:#ff4d29;font-size:14px}.presets-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:12px}.preset-btn{display:flex;flex-direction:column;gap:8px;padding:12px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.15);border-radius:var(--radius-lg);cursor:pointer;transition:background-color .2s cubic-bezier(.4, 0, .2, 1),border-color .2s cubic-bezier(.4, 0, .2, 1),transform .2s cubic-bezier(.4, 0, .2, 1)}.preset-btn:hover{background:rgba(255,77,41,.15);border-color:var(--color-primary);transform:translateY(-2px)}.preset-colors{display:flex;height:60px;border-radius:6px;overflow:hidden}.preset-colors span{flex:1;transition:flex .2s cubic-bezier(.4, 0, .2, 1)}.preset-btn:hover .preset-colors span{flex:2}.preset-name{font-size:13px;font-weight:600;color:rgba(255,255,255,.85);text-align:center}@media (max-width:1024px){.palette-colors-wrapper{grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px}.presets-grid{display:grid;grid-template-columns:repeat(10,1fr);gap:12px}.presets-grid .preset-btn{grid-column:span 2}.presets-grid .preset-btn:nth-child(6),.presets-grid .preset-btn:nth-child(7){grid-column:span 5}.color-card-actions,.drag-handle-left{opacity:1;transform:translateY(0)}.palette-color-card:hover{transform:none}.focus-color-strip .focus-copy-indicator,.focus-color-strip .focus-drag-handle,.focus-color-strip .focus-strip-actions,.focus-color-strip:hover .focus-copy-indicator,.focus-color-strip:hover .focus-drag-handle,.focus-color-strip:hover .focus-strip-actions,.focus-copy-indicator,.focus-drag-handle,.focus-strip-actions{opacity:1}.palette-actions-bar{gap:16px}.actions-left,.actions-right,.focus-group{gap:12px}}@media (max-width:768px){.palette-actions-bar{flex-direction:column;gap:12px}.actions-left,.actions-right{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}.actions-divider{display:none}.palette-colors-wrapper,.presets-grid{grid-template-columns:repeat(2,1fr)}.presets-grid .preset-btn,.presets-grid .preset-btn:nth-child(6){grid-column:span 1}.presets-grid .preset-btn:nth-child(7){grid-column:span 2}.palette-bottom-actions{flex-direction:column;gap:12px}.palette-bottom-actions button{width:100%}.color-card-actions,.drag-handle-left{opacity:1;transform:translateY(0)}.palette-color-card{height:160px}.palette-color-card:hover{transform:none}.card-action-btn{width:28px;height:28px;font-size:12px}}@media (max-width:480px){.palette-colors-wrapper{grid-template-columns:repeat(2,1fr);gap:8px;padding:12px}.palette-color-card{height:140px;min-width:unset}.card-action-btn{width:26px;height:26px;font-size:11px}.color-card-actions{gap:3px}.preset-colors{height:50px}}.mobile-color-picker-content{max-width:340px}.mobile-picker-main{display:flex;gap:var(--space-md);margin-bottom:var(--space-md)}.mobile-picker-preview{width:60px;height:150px;border-radius:var(--radius-lg);border:2px solid rgba(255,255,255,.2);flex-shrink:0}.mobile-picker-satval-wrap{position:relative;flex:1;border-radius:var(--radius-lg);overflow:hidden}.mobile-picker-satval{width:100%;height:150px;display:block;border-radius:var(--radius-lg);cursor:crosshair;touch-action:none}.mobile-picker-cursor{position:absolute;width:16px;height:16px;border:2px solid #fff;border-radius:50%;pointer-events:none;transform:translate(-50%,-50%);box-shadow:0 0 0 1px rgba(0,0,0,.3)}.mobile-picker-hue-wrap{position:relative;margin-bottom:var(--space-md);border-radius:var(--radius-md);overflow:hidden}.mobile-picker-hue{width:100%;height:20px;display:block;border-radius:var(--radius-md);cursor:crosshair;touch-action:none}.mobile-picker-hue-cursor{position:absolute;top:0;width:6px;height:100%;background:#fff;border-radius:2px;pointer-events:none;transform:translateX(-50%);box-shadow:0 0 0 1px rgba(0,0,0,.3)}.mobile-picker-inputs{display:flex;gap:var(--space-md);margin-bottom:var(--space-lg);align-items:flex-end}.mobile-picker-input-group{flex:1}.mobile-picker-input-group label{display:block;font-size:10px;font-weight:600;color:var(--text-secondary);margin-bottom:4px;text-transform:uppercase;letter-spacing:.5px}.mobile-picker-input-group input{width:100%;padding:8px 10px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);border-radius:var(--radius-md);color:var(--text-primary);font-size:var(--font-size-sm);font-family:Inter,monospace;font-weight:600;text-align:center;text-transform:uppercase}.mobile-picker-input-group input:focus{outline:0;border-color:var(--color-primary)}.mobile-picker-rgb{display:flex;gap:var(--space-xs)}.mobile-picker-input-small{flex:none;width:52px}.mobile-picker-input-small input{padding:8px 4px;font-size:var(--font-size-xs)}.mobile-picker-input-small input::-webkit-inner-spin-button,.mobile-picker-input-small input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.mobile-picker-input-small input[type=number]{-moz-appearance:textfield}.export-modal{position:fixed;top:0;left:0;width:100%;height:100%;background:radial-gradient(circle at 30% 40%,rgba(255,77,41,.12) 0,transparent 50%),radial-gradient(circle at 70% 60%,rgba(0,85,164,.1) 0,transparent 50%),linear-gradient(135deg,rgba(3,16,36,.97) 0,rgba(5,30,62,.98) 50%,rgba(3,16,36,.99) 100%);display:flex;align-items:center;justify-content:center;z-index:10000;opacity:0;visibility:hidden;transition:opacity .3s cubic-bezier(.4, 0, .2, 1),visibility .3s cubic-bezier(.4, 0, .2, 1)}.export-modal.active{opacity:1;visibility:visible}.export-modal-content{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.15);border-radius:24px;padding:32px;max-width:600px;width:90%;transform:scale(.9) translateY(20px);transition:transform .3s cubic-bezier(.4, 0, .2, 1)}.export-modal.active .export-modal-content{transform:scale(1) translateY(0)}.export-modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}.export-modal-header h3{font-size:1.5rem;font-weight:700;color:rgba(255,255,255,.95);margin:0}.export-modal-close{width:36px;height:36px;background:var(--color-dark-gray);border:none;border-radius:var(--radius-md);color:var(--color-light-gray);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .3s,color .3s}.export-modal-close:hover{background:var(--color-primary);color:var(--color-white)}.export-format-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.export-format-btn{background:rgba(255,77,41,.1);border:1px solid rgba(255,77,41,.2);border-radius:var(--radius-lg);padding:24px 16px;display:flex;flex-direction:column;align-items:center;gap:12px;cursor:pointer;transition:background-color .3s cubic-bezier(.4, 0, .2, 1),border-color .3s cubic-bezier(.4, 0, .2, 1),transform .3s cubic-bezier(.4, 0, .2, 1);color:var(--color-primary)}.export-format-btn i{font-size:2rem;color:var(--color-primary)}.export-format-btn span{font-size:.9rem;font-weight:600}.export-format-btn:hover{background:rgba(255,77,41,.2);border-color:var(--color-primary);transform:translate3d(0,-2px,0) scale3d(1.01,1.01,1)}@media (max-width:768px){.export-format-grid{grid-template-columns:repeat(2,1fr)}.export-modal-content{padding:24px}}@media (max-width:480px){.export-format-grid{grid-template-columns:1fr}}@media (max-width:1400px){.gradient-settings-layout{gap:var(--space-lg)}}@media (max-width:1024px){.gradient-mode-container{display:flex;flex-direction:column;gap:var(--space-lg)}.gradient-main-content,.gradient-settings-layout{display:contents}.gradient-panel-left{order:1}.gradient-sidebar{order:2}.gradient-preview-section{order:3}.gradient-panel-right{order:4}.gradient-preview-large{min-height:400px}}@media (max-width:768px){.gradient-settings-panel{padding:var(--space-sm);gap:var(--space-sm)}.presets-row,.type-buttons-row{gap:var(--space-xs)}.type-btn-pro{padding:var(--space-sm)}.btn-browse-library{padding:var(--space-sm);font-size:var(--font-size-xs)}.gradient-preview-large{min-height:350px}.angle-controls-row{grid-template-columns:1fr}.quick-angles-grid{grid-template-columns:repeat(4,1fr)}}@media (max-width:480px){.gradient-settings-layout{gap:var(--space-md)}.gradient-settings-panel{padding:var(--space-sm);gap:var(--space-xs)}.section-label{font-size:10px;margin-bottom:var(--space-xs)}.type-btn-pro{padding:var(--space-xs);font-size:10px}.type-btn-pro i{font-size:var(--font-size-md)}.btn-browse-library{padding:var(--space-xs);font-size:10px}.preset-btn-mini{padding:var(--space-xs)}.preset-btn-mini i{font-size:var(--font-size-md)}.gradient-preview-large{min-height:300px}.quick-angles-grid{grid-template-columns:repeat(2,1fr)}}.global-drag-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:radial-gradient(circle at 30% 40%,rgba(255,77,41,.12) 0,transparent 50%),radial-gradient(circle at 70% 60%,rgba(0,85,164,.1) 0,transparent 50%),linear-gradient(135deg,rgba(3,16,36,.97) 0,rgba(5,30,62,.98) 50%,rgba(3,16,36,.99) 100%);z-index:9999;display:none;align-items:center;justify-content:center;pointer-events:none}.global-drag-overlay.active{display:flex}.drag-overlay-content{text-align:center;color:var(--color-white);padding:var(--space-2xl) var(--space-3xl);background:rgba(255,255,255,.08);border-radius:var(--radius-xl);border:2px dashed rgba(255,77,41,.6);animation:2s ease-in-out infinite alternate dragPulse}.drag-overlay-icon{font-size:3.5rem;margin-bottom:var(--space-lg);color:var(--color-primary)}.drag-overlay-text{font-size:var(--font-size-xl);font-weight:700;margin-bottom:var(--space-sm);color:var(--color-white)}.drag-overlay-subtitle{font-size:var(--font-size-sm);color:var(--text-secondary)}@keyframes dragPulse{0%{transform:scale(1);border-color:rgba(255,77,41,.4)}100%{transform:scale(1.02);border-color:rgba(255,77,41,.8)}}.action-btn-focus{display:flex;align-items:center;justify-content:center;width:36px;height:36px;background:linear-gradient(135deg,var(--color-primary) 0,#e64024 100%);border:none;border-radius:var(--radius-lg);color:#fff;font-size:14px;cursor:pointer;transition:transform .2s cubic-bezier(.4, 0, .2, 1)}.action-btn-focus:hover{transform:scale(1.08)}.palette-focus-modal{position:fixed;top:0;left:0;width:100%;height:100%;background:radial-gradient(circle at 30% 40%,rgba(255,77,41,.12) 0,transparent 50%),radial-gradient(circle at 70% 60%,rgba(0,85,164,.1) 0,transparent 50%),linear-gradient(135deg,rgba(3,16,36,.99) 0,rgba(5,30,62,.99) 50%,#031024 100%);z-index:1500;display:none;flex-direction:column}.palette-focus-modal.active{display:flex}body.palette-focus-active,html.palette-focus-active{overflow:hidden!important}.palette-focus-header{padding:var(--space-lg) var(--space-xl);background:rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.1)}.focus-actions-bar{background:0 0!important;border:none!important;padding:0!important;justify-content:space-between}.focus-group{display:flex;align-items:center;gap:12px}.focus-left{justify-content:flex-start}.focus-right{justify-content:flex-end}.focus-divider{color:rgba(255,255,255,.3);font-size:18px;font-weight:300;user-select:none}.focus-actions-bar .action-btn-inline:not(.action-btn-star){background:rgba(52,152,219,.12);border-color:rgba(52,152,219,.18);color:rgba(52,152,219,.9)}.focus-actions-bar .action-btn-inline:not(.action-btn-star):hover{background:rgba(52,152,219,.15);border-color:rgba(52,152,219,.25)}.palette-focus-content{display:flex;flex-wrap:wrap;flex:1;width:100%;overflow:hidden}.focus-color-strip{flex:1 1 auto;min-width:100px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding-bottom:40px;position:relative;cursor:pointer;transition:filter .2s}.focus-color-strip:hover{filter:brightness(1.08)}.focus-strip-actions{position:absolute;top:16px;right:16px;display:flex;flex-direction:column;gap:6px;opacity:0;transition:opacity .2s}.focus-color-strip:hover .focus-strip-actions{opacity:1}.focus-strip-btn{display:flex;align-items:center;justify-content:center;width:32px;height:32px;background:rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.2);border-radius:var(--radius-md);color:#fff;font-size:13px;cursor:pointer;transition:.2s}.focus-strip-btn:hover{background:rgba(0,0,0,.7);transform:scale(1.1)}.focus-strip-btn.locked{color:var(--color-primary);background:rgba(0,0,0,.6)}.focus-drag-handle{position:absolute;top:16px;left:16px;display:flex;align-items:center;justify-content:center;width:32px;height:32px;background:rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.2);border-radius:var(--radius-md);color:rgba(255,255,255,.7);font-size:13px;cursor:grab;opacity:0;transition:opacity .2s}.focus-drag-handle:hover{background:rgba(0,0,0,.7);color:#fff}.focus-drag-handle:active{cursor:grabbing}.focus-color-strip:hover .focus-drag-handle{opacity:1}.focus-strip-btn-delete:hover{background:rgba(231,76,60,.8);color:#fff}.focus-strip-ghost{opacity:.4}.focus-strip-dragging{z-index:1000}.focus-color-info{display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 16px;background:rgba(0,0,0,.5);border-radius:var(--radius-lg);transition:.2s}.focus-color-strip:hover .focus-color-info{background:rgba(0,0,0,.7);transform:translateY(-4px)}.focus-color-label{font-size:10px;text-transform:uppercase;letter-spacing:.5px;color:rgba(255,255,255,.6);font-weight:600}.focus-color-value{font-size:14px;font-weight:700;color:#fff;font-family:'Courier New',monospace}.focus-copy-indicator{font-size:10px;color:rgba(255,255,255,.5);opacity:0;transition:opacity .2s}.focus-color-strip:hover .focus-copy-indicator{opacity:1}@media (max-width:768px){.palette-focus-header{padding:var(--space-md)}.focus-actions-bar{flex-direction:column;gap:12px}.focus-group{flex-wrap:wrap;justify-content:center;width:100%;gap:8px}.focus-divider{display:none}.focus-color-strip{min-width:80px;padding-bottom:20px}.focus-color-info{padding:8px 12px}.focus-color-value{font-size:11px}.focus-strip-actions{top:8px;right:8px}.focus-strip-btn{width:28px;height:28px;font-size:11px}.focus-drag-handle{top:8px;left:8px;opacity:1}.focus-copy-indicator,.focus-strip-actions{opacity:1}}@media (max-width:1024px) and (min-width:901px){.usage-steps-horizontal{display:flex;flex-wrap:nowrap;justify-content:center;align-items:flex-start;gap:var(--space-lg)}.usage-step{flex:1;max-width:180px;text-align:center;align-items:center}.quick-features{display:flex;flex-wrap:nowrap;gap:var(--space-sm)}.quick-feature{flex:1;min-width:0;padding:var(--space-sm)}.quick-feature span{font-size:11px;line-height:1.2}}@media (max-width:1200px){.mode-buttons-integrated{gap:var(--space-sm);padding:var(--space-xs)}.mode-btn-integrated{flex:1 1 calc(33.333% - var(--space-sm));min-width:calc(33.333% - var(--space-sm));max-width:none;padding:var(--space-sm) var(--space-md)}.mode-icon-integrated{width:32px;height:32px}.mode-icon-integrated i{font-size:14px}.mode-title-integrated{font-size:var(--font-size-sm)}.mode-desc-integrated{font-size:10px}}@media (max-width:1024px){body{background:linear-gradient(180deg,#05204b 0,#031127 100%)}.hero{padding:var(--space-xs) var(--space-md)}.hero-title{font-size:var(--font-size-lg)}.hero-description{font-size:var(--font-size-sm)}.content-wrapper{padding:var(--space-xl)}.section-header h2{font-size:var(--font-size-lg)}.section-header p{font-size:var(--font-size-sm)}.tool-tabs{right:48px;top:-40px}.tool-tab{width:40px;height:40px}.tool-tab i{font-size:16px}.usage-steps-horizontal{display:flex;flex-direction:row;justify-content:center;align-items:flex-start;gap:var(--space-md)}.usage-step{text-align:center;align-items:center;flex:0 1 auto}.step-arrow{display:flex;margin-top:var(--space-xl)}.step-icon{width:56px;height:56px}.step-icon i{font-size:1.125rem}.usage-step h4{font-size:var(--font-size-sm)}.usage-step p{font-size:var(--font-size-xs)}.quick-features{display:flex;flex-wrap:nowrap;gap:var(--space-xs)}.quick-feature{flex:1;min-width:0;padding:var(--space-sm)}.quick-feature span{font-size:11px;line-height:1.2}.picker-3col-grid{grid-template-columns:1fr 1fr;grid-template-rows:auto auto;gap:var(--space-lg)}.picker-column{grid-column:1;grid-row:1}.formats-column{grid-column:2;grid-row:1}.harmony-column{grid-column:1/-1;grid-row:2}.harmony-wrapper{height:auto}.harmonies-grid{grid-template-columns:repeat(6,1fr)}}@media (max-width:768px){.page-layout{padding:0 var(--space-md);padding-bottom:60px;transform:none}.main-content{transform:none;contain:none;will-change:auto}.tool-container{padding:0 var(--space-sm)}.hero{padding:var(--space-xs) var(--space-sm);margin-bottom:var(--space-md);transform:none;contain:none}.tool-tabs{position:fixed;top:auto;bottom:0;left:0;right:0;width:100%;height:52px;flex-direction:row;justify-content:center;align-items:center;gap:var(--space-md);padding:0 var(--space-md);background:linear-gradient(180deg,rgba(255,255,255,.08) 0,rgba(255,255,255,.02) 100%),linear-gradient(135deg,rgba(5,20,45,.95) 0,rgba(3,16,36,.92) 50%,rgba(10,25,50,.95) 100%);border-top:1px solid rgba(255,255,255,.12);border-bottom:none;z-index:1000}.tool-tab{width:40px;height:40px;border-radius:var(--radius-md);border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.08);cursor:pointer;pointer-events:auto;flex-shrink:0}.tool-tab:active{background:rgba(255,255,255,.15)}.tool-tab i{font-size:16px}.hero-title{font-size:var(--font-size-base)}.hero-description{font-size:var(--font-size-xs);max-width:100%}.content-wrapper{padding:var(--space-lg);border-radius:var(--radius-lg)}.mode-buttons-integrated{display:flex;flex-direction:row;flex-wrap:wrap;gap:var(--space-sm)}.mode-btn-integrated{flex:1 1 calc(50% - var(--space-sm)/ 2);min-width:calc(50% - var(--space-sm)/ 2);max-width:none;padding:var(--space-sm) var(--space-md);min-height:44px}.mode-icon-integrated{width:36px;height:36px}.mode-icon-integrated i{font-size:14px}.mode-title-integrated{font-size:var(--font-size-xs)}.mode-desc-integrated{font-size:10px}.section-header{margin-bottom:var(--space-md)}.section-header h2{font-size:var(--font-size-sm)}.section-header p{font-size:var(--font-size-xs)}.analytics-header{flex-direction:row;text-align:left;justify-content:space-between;align-items:center}.analytics-header h4{font-size:var(--font-size-sm)}.reset-stats-btn{width:auto;height:28px;padding:0 var(--space-sm);font-size:var(--font-size-xs)}.analytics-card{padding:var(--space-sm)}.analytics-icon{width:36px;height:36px}.analytics-icon i{font-size:var(--font-size-sm)}.analytics-value{font-size:var(--font-size-base)}.analytics-label{font-size:9px}.usage-compact{margin-top:var(--space-lg)}.usage-steps-horizontal{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-md);justify-items:center;margin-bottom:var(--space-sm)}.usage-step{align-items:center;text-align:center}.usage-step:nth-child(5){grid-column:1/-1;justify-self:center;margin-top:var(--space-sm)}.step-arrow{display:none}.step-icon{width:56px;height:56px}.step-icon i{font-size:1.125rem}.usage-step h4{font-size:var(--font-size-sm)}.usage-step p{font-size:var(--font-size-xs)}.quick-features{display:flex;flex-wrap:nowrap;gap:var(--space-xs)}.quick-feature{flex:1;padding:var(--space-sm);flex-direction:column;text-align:center}.quick-feature i{font-size:var(--font-size-sm)}.quick-feature span{font-size:9px}.picker-3col-grid{grid-template-columns:1fr;gap:var(--space-md)}.formats-column,.harmony-column,.picker-column{grid-column:1}.picker-column{grid-row:1}.harmony-column{grid-row:2}.formats-column{grid-row:3}.formats-wrapper .btn-block{margin-top:var(--space-md)}.harmonies-grid{grid-template-columns:repeat(3,1fr)}.features-grid{grid-template-columns:1fr;gap:var(--space-sm)}.feature-card{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;gap:0 var(--space-md);text-align:left;padding:var(--space-md);align-items:start}.feature-icon{grid-row:1/3;align-self:center;width:44px;height:44px}.feature-card h3{grid-column:2;grid-row:1;font-size:var(--font-size-sm);margin-bottom:0}.feature-card p{grid-column:2;grid-row:2;font-size:var(--font-size-xs);margin:0}.faq-grid{grid-template-columns:1fr;gap:var(--space-md)}.faq-question{min-height:44px}.faq-question h3{font-size:var(--font-size-sm)}}@media (max-width:480px){.page-layout{padding:0 var(--space-sm)}.tool-container{padding:0 var(--space-xs)}.hero{padding:0 var(--space-xs);margin-bottom:var(--space-md)}.hero-title{font-size:var(--font-size-sm);font-weight:800}.hero-description{font-size:11px;line-height:1.4}.content-wrapper{padding:var(--space-md);border-radius:var(--radius-md)}.mode-buttons-integrated{gap:var(--space-xs)}.mode-btn-integrated{flex:1 1 calc(50% - var(--space-xs)/ 2);min-width:calc(50% - var(--space-xs)/ 2);padding:var(--space-xs) var(--space-sm)}.mode-icon-integrated{width:32px;height:32px}.mode-icon-integrated i{font-size:12px}.mode-title-integrated{font-size:11px}.mode-desc-integrated{font-size:9px}.tool-tab{width:36px;height:36px}.tool-tab i{font-size:14px}.section-header h2{font-size:var(--font-size-sm)}.section-header p{font-size:11px}.analytics-header h4{font-size:var(--font-size-xs)}.reset-stats-btn{height:24px;padding:0 var(--space-xs);font-size:10px}.analytics-icon{width:32px;height:32px}.analytics-icon i{font-size:var(--font-size-xs)}.analytics-value{font-size:var(--font-size-sm)}.analytics-label{font-size:8px}.usage-compact{margin-top:var(--space-md)}.usage-steps-horizontal{grid-template-columns:repeat(2,1fr);gap:var(--space-sm);justify-items:center}.step-icon{width:48px;height:48px}.step-icon i{font-size:1rem}.usage-step h4{font-size:var(--font-size-xs)}.usage-step p{font-size:10px}.quick-feature{padding:var(--space-xs)}.quick-feature i{font-size:var(--font-size-xs)}.quick-feature span{font-size:8px}.features-grid{gap:var(--space-xs)}.feature-card{padding:var(--space-sm) var(--space-md);gap:0 var(--space-sm)}.feature-icon{width:36px;height:36px;font-size:.875rem}.feature-card h3{font-size:var(--font-size-xs);margin-bottom:0}.feature-card p{font-size:11px;line-height:1.3}.faq-question{padding:var(--space-md)}.faq-question h3{font-size:var(--font-size-xs)}.faq-answer-content{padding:0 var(--space-md) var(--space-md)}.faq-answer-content p{font-size:var(--font-size-xs)}}@media (max-width:375px){.page-layout{padding:0 var(--space-xs)}.tool-container{padding:0}.hero{margin-bottom:var(--space-sm)}.hero-title{font-size:var(--font-size-xs)}.hero-description{font-size:10px}.content-wrapper{padding:var(--space-sm)}.mode-buttons-integrated{gap:4px}.mode-btn-integrated{padding:var(--space-xs)}.mode-icon-integrated{width:28px;height:28px}.mode-icon-integrated i{font-size:11px}.mode-title-integrated{font-size:10px}.mode-desc-integrated{display:none}.tool-tabs{gap:var(--space-xs)}.tool-tab{width:32px;height:32px}.tool-tab i{font-size:12px}.section-header h2{font-size:var(--font-size-xs)}.section-header p{font-size:10px}.analytics-header h4{font-size:11px}.reset-stats-btn{height:22px;font-size:9px}.analytics-icon{width:28px;height:28px}.analytics-value{font-size:var(--font-size-xs)}.analytics-label{font-size:7px}.usage-compact{margin-top:var(--space-sm)}.step-icon{width:40px;height:40px}.step-icon i{font-size:.875rem}.usage-step h4{font-size:11px}.usage-step p{font-size:9px}.quick-feature span{font-size:7px}.feature-card{padding:var(--space-xs) var(--space-sm)}.feature-icon{width:32px;height:32px}.feature-card h3{font-size:11px}.feature-card p{font-size:10px}.faq-answer-content p,.faq-question h3{font-size:11px}}