*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}html{font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}body{font-family:var(--font-family);background:var(--bg-primary);color:var(--text-primary);min-height:100vh;overflow-x:hidden;line-height:1.6}#root{min-height:100vh;display:flex;flex-direction:column}a{color:inherit;text-decoration:none}button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}input,select,textarea{font-family:inherit;color:inherit;background:none;border:none;outline:none}ul,ol{list-style:none}img{max-width:100%;display:block}:root{--glass-tint-rgb: 255, 255, 255;--glass-blur: 20px;--glass-bg: rgba(255, 255, 255, .06);--glass-bg-hover: rgba(255, 255, 255, .1);--glass-border: rgba(255, 255, 255, .12);--glass-border-hover: rgba(255, 255, 255, .2);--glass-shadow: 0 8px 32px rgba(0, 0, 0, .2);--glass-shadow-hover: 0 12px 48px rgba(0, 0, 0, .3);--glass-reflection: linear-gradient(135deg, rgba(255,255,255,.15) 0%, transparent 50%);--glass-radius: 20px;--glass-radius-sm: 12px;--glass-radius-xs: 8px;--bg-primary: #0a0a0f;--bg-secondary: #12121a;--bg-gradient: radial-gradient(ellipse at top, #1a1a2e 0%, #0a0a0f 70%);--bg-gradient-accent: radial-gradient(circle at 30% 20%, rgba(108, 99, 255, .08) 0%, transparent 50%), radial-gradient(circle at 70% 80%, rgba(255, 101, 132, .06) 0%, transparent 50%);--header-bg: rgba(10, 10, 15, .7);--footer-bg: rgba(10, 10, 15, .5);--toast-bg: rgba(20, 20, 30, .85);--dropdown-bg: rgba(20, 20, 30, .92);--text-primary: rgba(255, 255, 255, .95);--text-secondary: rgba(255, 255, 255, .55);--text-tertiary: rgba(255, 255, 255, .35);--text-on-accent: #ffffff;--accent: #6C63FF;--accent-hover: #7B73FF;--accent-glow: rgba(108, 99, 255, .3);--accent-secondary: #FF6584;--accent-secondary-glow: rgba(255, 101, 132, .3);--accent-text: #a29bff;--success: #34D399;--success-bg: rgba(52, 211, 153, .12);--warning: #FBBF24;--warning-bg: rgba(251, 191, 36, .12);--error: #F87171;--error-bg: rgba(248, 113, 113, .12);--font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--font-mono: "JetBrains Mono", "SF Mono", "Fira Code", monospace;--font-xs: .75rem;--font-sm: .8125rem;--font-base: .9375rem;--font-md: 1rem;--font-lg: 1.125rem;--font-xl: 1.5rem;--font-2xl: 2rem;--font-3xl: 2.5rem;--space-xs: 4px;--space-sm: 8px;--space-md: 16px;--space-lg: 24px;--space-xl: 32px;--space-2xl: 48px;--space-3xl: 64px;--transition-fast: .15s ease;--transition-base: .25s ease;--transition-slow: .4s ease;--transition-spring: .5s cubic-bezier(.34, 1.56, .64, 1);--z-base: 1;--z-dropdown: 10;--z-modal: 100;--z-toast: 200;--z-tooltip: 300;--header-height: 64px;--max-width: 1400px;--sidebar-width: 320px}.glass{background:var(--glass-bg);backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));border:1px solid var(--glass-border);border-radius:var(--glass-radius);box-shadow:var(--glass-shadow);position:relative;overflow:hidden}.glass:before{content:"";position:absolute;top:0;left:0;right:0;height:50%;background:var(--glass-reflection);pointer-events:none;z-index:0}.glass:hover{background:var(--glass-bg-hover);border-color:var(--glass-border-hover);box-shadow:var(--glass-shadow-hover)}.glass>*{position:relative;z-index:1}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeInScale{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes slideInRight{0%{opacity:0;transform:translate(20px)}to{opacity:1;transform:translate(0)}}@keyframes slideInDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}@keyframes springBounce{0%{transform:scale(1)}40%{transform:scale(1.15)}60%{transform:scale(.95)}80%{transform:scale(1.03)}to{transform:scale(1)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}@keyframes ripple{0%{transform:scale(0);opacity:.5}to{transform:scale(4);opacity:0}}@keyframes toastSlideIn{0%{opacity:0;transform:translate(100%) scale(.9)}to{opacity:1;transform:translate(0) scale(1)}}@keyframes toastSlideOut{0%{opacity:1;transform:translate(0) scale(1)}to{opacity:0;transform:translate(100%) scale(.9)}}@keyframes glowPulse{0%,to{box-shadow:0 0 20px var(--accent-glow)}50%{box-shadow:0 0 40px var(--accent-glow),0 0 60px #6c63ff26}}.app-background{position:fixed;top:0;left:0;width:100%;height:100%;background:var(--bg-gradient);z-index:-2}.app-background:after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:var(--bg-gradient-accent);z-index:-1}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#ffffff26;border-radius:3px}::-webkit-scrollbar-thumb:hover{background:#ffffff40}::selection{background:#6c63ff4d;color:var(--text-primary)}[data-theme=light]{--glass-tint-rgb: 0, 0, 0;--glass-bg: rgba(255, 255, 255, .55);--glass-bg-hover: rgba(255, 255, 255, .7);--glass-border: rgba(0, 0, 0, .08);--glass-border-hover: rgba(0, 0, 0, .14);--glass-shadow: 0 8px 32px rgba(0, 0, 0, .06);--glass-shadow-hover: 0 12px 48px rgba(0, 0, 0, .1);--glass-reflection: linear-gradient(135deg, rgba(255, 255, 255, .6) 0%, transparent 50%);--bg-primary: #f2f2f7;--bg-secondary: #e5e5ea;--bg-gradient: radial-gradient(ellipse at top, #e8e8f2 0%, #f2f2f7 70%);--bg-gradient-accent: radial-gradient(circle at 30% 20%, rgba(108, 99, 255, .05) 0%, transparent 50%), radial-gradient(circle at 70% 80%, rgba(255, 101, 132, .04) 0%, transparent 50%);--header-bg: rgba(255, 255, 255, .72);--footer-bg: rgba(255, 255, 255, .5);--toast-bg: rgba(255, 255, 255, .92);--dropdown-bg: rgba(255, 255, 255, .95);--text-primary: rgba(0, 0, 0, .88);--text-secondary: rgba(0, 0, 0, .52);--text-tertiary: rgba(0, 0, 0, .32);--text-on-accent: #ffffff;--accent: #5B54E0;--accent-hover: #4A43D0;--accent-glow: rgba(91, 84, 224, .18);--accent-secondary: #E0507A;--accent-secondary-glow: rgba(224, 80, 122, .18);--accent-text: #5B54E0;--success: #059669;--success-bg: rgba(5, 150, 105, .1);--warning: #D97706;--warning-bg: rgba(217, 119, 6, .1);--error: #DC2626;--error-bg: rgba(220, 38, 38, .1)}[data-theme=light] ::-webkit-scrollbar-thumb{background:#0000001f}[data-theme=light] ::-webkit-scrollbar-thumb:hover{background:#00000038}[data-theme=light] ::selection{background:#5b54e033}@media(max-width:1200px){:root{--max-width: 1000px}}@media(max-width:768px){:root{--glass-radius: 16px;--header-height: 56px;--font-3xl: 2rem;--font-2xl: 1.5rem;--space-xl: 24px;--space-2xl: 32px;--space-3xl: 48px}}@media(max-width:480px){:root{--glass-radius: 12px;--font-3xl: 1.75rem;--font-2xl: 1.25rem}}.toast-container{position:fixed;top:calc(var(--header-height) + var(--space-md));right:var(--space-lg);display:flex;flex-direction:column;gap:var(--space-sm);z-index:var(--z-toast);pointer-events:none}.toast{display:flex;align-items:center;gap:var(--space-sm);padding:12px 16px;background:var(--toast-bg);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--glass-border);border-radius:var(--glass-radius-sm);box-shadow:0 8px 32px #0000004d;color:var(--text-primary);font-size:var(--font-sm);pointer-events:all;animation:toastSlideIn .3s cubic-bezier(.34,1.56,.64,1);min-width:240px;max-width:380px}.toast--exit{animation:toastSlideOut .3s ease forwards}.toast__icon{display:flex;align-items:center;flex-shrink:0}.toast--success .toast__icon{color:var(--success)}.toast--info .toast__icon{color:var(--accent)}.toast--warning .toast__icon{color:var(--warning)}.toast--error .toast__icon{color:var(--error)}.toast--copy .toast__icon{color:var(--accent)}.toast__message{flex:1;line-height:1.4}.toast__close{display:flex;align-items:center;justify-content:center;background:none;border:none;color:var(--text-tertiary);cursor:pointer;padding:2px;border-radius:4px;transition:all var(--transition-fast);flex-shrink:0}.toast__close:hover{color:var(--text-primary);background:rgba(var(--glass-tint-rgb),.1)}@media(max-width:480px){.toast-container{left:var(--space-md);right:var(--space-md)}.toast{max-width:none}}.theme-toggle{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:var(--glass-radius-xs);background:rgba(var(--glass-tint-rgb),.06);border:1px solid rgba(var(--glass-tint-rgb),.1);color:var(--text-secondary);cursor:pointer;transition:all var(--transition-base);flex-shrink:0}.theme-toggle:hover{background:rgba(var(--glass-tint-rgb),.12);border-color:rgba(var(--glass-tint-rgb),.2);color:var(--text-primary);transform:rotate(15deg)}.theme-toggle:active{transform:scale(.92) rotate(15deg)}.theme-toggle svg{transition:transform .4s cubic-bezier(.34,1.56,.64,1)}.theme-toggle:hover svg{transform:scale(1.1)}.header{position:sticky;top:0;z-index:var(--z-dropdown);background:var(--header-bg);backdrop-filter:blur(24px) saturate(1.2);-webkit-backdrop-filter:blur(24px) saturate(1.2);border-bottom:1px solid var(--glass-border);height:var(--header-height)}.header__inner{max-width:var(--max-width);margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:0 var(--space-xl);height:100%}.header__logo{display:flex;align-items:center;gap:var(--space-sm);text-decoration:none;color:var(--text-primary);font-weight:700;font-size:var(--font-lg);transition:opacity var(--transition-fast)}.header__logo:hover{opacity:.8}.header__logo-icon{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,var(--accent),var(--accent-secondary));color:#fff;box-shadow:0 2px 12px var(--accent-glow)}.header__logo-text{font-size:var(--font-lg);letter-spacing:-.02em}.header__logo-accent{background:linear-gradient(135deg,var(--accent),var(--accent-secondary));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.header__nav{display:flex;align-items:center;gap:var(--space-xs)}.header__nav-item{display:flex;align-items:center;gap:6px;padding:8px 16px;border-radius:var(--glass-radius-xs);color:var(--text-secondary);font-size:var(--font-sm);font-weight:500;transition:all var(--transition-base);text-decoration:none;position:relative}.header__nav-item:hover{color:var(--text-primary);background:var(--glass-bg)}.header__nav-item--active{color:var(--text-primary);background:#6c63ff1f;border:1px solid rgba(108,99,255,.2)}.header__nav-item--active:after{content:"";position:absolute;bottom:-1px;left:50%;transform:translate(-50%);width:20px;height:2px;background:var(--accent);border-radius:1px}.header__actions{display:flex;align-items:center;gap:var(--space-md)}.header__shortcut-hint{font-size:var(--font-xs);color:var(--text-tertiary);display:flex;align-items:center;gap:4px}.header__shortcut-hint kbd{display:inline-flex;align-items:center;padding:2px 6px;background:rgba(var(--glass-tint-rgb),.08);border:1px solid rgba(var(--glass-tint-rgb),.12);border-radius:4px;font-family:var(--font-mono);font-size:.7rem;line-height:1.4}@media(max-width:768px){.header__inner{padding:0 var(--space-md)}.header__nav-item span{display:none}.header__nav-item{padding:8px}.header__shortcut-hint,.header__logo-text{display:none}}.footer{margin-top:auto;padding:var(--space-lg) var(--space-xl);border-top:1px solid var(--glass-border);background:var(--footer-bg);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}.footer__inner{max-width:var(--max-width);margin:0 auto;text-align:center}.footer__text{font-size:var(--font-sm);color:var(--text-secondary);display:flex;align-items:center;justify-content:center;gap:4px}.footer__heart{color:var(--accent-secondary);animation:pulse 2s ease-in-out infinite}.footer__sub{font-size:var(--font-xs);color:var(--text-tertiary);margin-top:var(--space-xs)}.footer__sub kbd{display:inline-flex;padding:1px 5px;background:rgba(var(--glass-tint-rgb),.06);border:1px solid rgba(var(--glass-tint-rgb),.1);border-radius:3px;font-family:var(--font-mono);font-size:.65rem}.layout{min-height:100vh;display:flex;flex-direction:column;position:relative}.layout__bg{position:fixed;top:0;left:0;width:100%;height:100%;background:var(--bg-gradient);z-index:-10}.layout__bg-orb{position:fixed;border-radius:50%;filter:blur(100px);opacity:.15;z-index:-5;pointer-events:none;animation:orbFloat 20s ease-in-out infinite}.layout__bg-orb--1{width:600px;height:600px;background:var(--accent);top:-200px;left:-100px;animation-delay:0s}.layout__bg-orb--2{width:500px;height:500px;background:var(--accent-secondary);bottom:-200px;right:-100px;animation-delay:-7s;animation-duration:25s}.layout__bg-orb--3{width:400px;height:400px;background:#34d399;top:50%;left:50%;transform:translate(-50%,-50%);animation-delay:-14s;animation-duration:30s;opacity:.08}@keyframes orbFloat{0%,to{transform:translate(0) scale(1)}25%{transform:translate(30px,-30px) scale(1.05)}50%{transform:translate(-20px,20px) scale(.95)}75%{transform:translate(15px,15px) scale(1.02)}}.layout__main{flex:1;max-width:var(--max-width);width:100%;margin:0 auto;padding:var(--space-xl) var(--space-xl) var(--space-2xl)}@media(max-width:768px){.layout__main{padding:var(--space-md) var(--space-md) var(--space-xl)}.layout__bg-orb--1{width:300px;height:300px}.layout__bg-orb--2{width:250px;height:250px}.layout__bg-orb--3{display:none}}.color-card{position:relative;border-radius:var(--glass-radius);overflow:hidden;cursor:pointer;transition:all var(--transition-base);animation:fadeInUp .5s cubic-bezier(.34,1.56,.64,1) backwards;min-height:280px;display:flex;flex-direction:column}.color-card__fill{position:absolute;inset:0;transition:background var(--transition-slow)}.color-card:before{content:"";position:absolute;top:0;left:0;right:0;height:40%;background:linear-gradient(180deg,rgba(var(--glass-tint-rgb),.12) 0%,transparent 100%);z-index:1;pointer-events:none;opacity:.7;transition:opacity var(--transition-base)}.color-card:hover{transform:translateY(-4px) scale(1.02);box-shadow:0 12px 40px #0000004d,inset 0 1px rgba(var(--glass-tint-rgb),.15)}.color-card:hover:before{opacity:1}.color-card--selected{box-shadow:0 0 0 3px #6c63ff80,0 8px 32px #0003}.color-card:active{transform:translateY(-2px) scale(1.01)}.color-card__overlay{position:relative;z-index:2;display:flex;flex-direction:column;justify-content:space-between;height:100%;min-height:280px;padding:var(--space-md)}.color-card__lock-btn{align-self:flex-end;display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:#00000026;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(var(--glass-tint-rgb),.1);color:var(--card-text);cursor:pointer;transition:all var(--transition-base);opacity:0}.color-card:hover .color-card__lock-btn{opacity:1}.color-card__lock-btn:hover{background:#0000004d;transform:scale(1.1)}.color-card__lock-btn:active{animation:springBounce .4s ease}.color-card__info{display:flex;flex-direction:column;gap:var(--space-xs)}.color-card__hex{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:var(--font-sm);font-weight:600;color:var(--card-text);background:#0000001f;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(var(--glass-tint-rgb),.08);padding:6px 12px;border-radius:var(--glass-radius-xs);cursor:pointer;transition:all var(--transition-base);width:fit-content}.color-card__hex:hover{background:#00000040;border-color:rgba(var(--glass-tint-rgb),.15)}.color-card__copy-icon{opacity:0;transition:opacity var(--transition-fast)}.color-card__hex:hover .color-card__copy-icon{opacity:1}.color-card__lock-badge{position:absolute;top:var(--space-md);left:var(--space-md);z-index:3;display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;background:#0000004d;backdrop-filter:blur(8px);color:var(--card-text);animation:springBounce .4s ease}@media(max-width:768px){.color-card{min-height:180px}.color-card__overlay{min-height:180px;padding:var(--space-sm)}.color-card__lock-btn{opacity:1;width:28px;height:28px}}@media(max-width:600px){.color-card,.color-card__overlay{min-height:140px}}.harmony-selector{display:flex;flex-direction:column;gap:var(--space-sm)}.harmony-selector__label{font-size:var(--font-xs);color:var(--text-secondary);text-transform:uppercase;letter-spacing:.08em;font-weight:600}.harmony-selector__options{display:flex;flex-wrap:wrap;gap:var(--space-xs);background:rgba(var(--glass-tint-rgb),.03);border:1px solid var(--glass-border);border-radius:var(--glass-radius-sm);padding:4px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.harmony-selector__option{padding:6px 12px;border-radius:var(--glass-radius-xs);font-size:var(--font-xs);font-weight:500;color:var(--text-secondary);cursor:pointer;transition:all var(--transition-base);white-space:nowrap;border:1px solid transparent;background:transparent}.harmony-selector__option:hover{color:var(--text-primary);background:rgba(var(--glass-tint-rgb),.06)}.harmony-selector__option--active{color:var(--text-primary);background:#6c63ff26;border-color:#6c63ff4d;box-shadow:0 0 12px #6c63ff1a}@media(max-width:768px){.harmony-selector__options{gap:2px}.harmony-selector__option{padding:5px 8px;font-size:.65rem}}.glass-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:var(--space-sm);background:var(--glass-bg);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--glass-border);border-radius:var(--glass-radius-sm);color:var(--text-primary);font-weight:500;cursor:pointer;overflow:hidden;transition:all var(--transition-base);white-space:nowrap;user-select:none}.glass-btn:hover:not(:disabled){background:var(--glass-bg-hover);border-color:var(--glass-border-hover);transform:translateY(-1px);box-shadow:0 4px 16px #0003}.glass-btn:active:not(:disabled){transform:translateY(0) scale(.98)}.glass-btn:disabled{opacity:.4;cursor:not-allowed}.glass-btn--sm{padding:6px 12px;font-size:var(--font-xs);border-radius:var(--glass-radius-xs)}.glass-btn--md{padding:10px 20px;font-size:var(--font-sm)}.glass-btn--lg{padding:14px 28px;font-size:var(--font-base)}.glass-btn--primary{background:#6c63ff33;border-color:#6c63ff4d;color:var(--accent-text)}.glass-btn--primary:hover:not(:disabled){background:#6c63ff4d;border-color:#6c63ff80;box-shadow:0 4px 20px var(--accent-glow)}.glass-btn--icon{padding:8px;border-radius:50%;aspect-ratio:1;min-width:unset}.glass-btn--icon.glass-btn--sm{padding:6px}.glass-btn--icon.glass-btn--lg{padding:12px}.glass-btn--ghost{background:transparent;border-color:transparent;backdrop-filter:none}.glass-btn--ghost:hover:not(:disabled){background:var(--glass-bg);border-color:var(--glass-border)}.glass-btn__ripple{position:absolute;width:10px;height:10px;border-radius:50%;background:rgba(var(--glass-tint-rgb),.3);transform:scale(0);animation:ripple .6s ease-out;pointer-events:none}.palette-actions{display:flex;align-items:center;justify-content:space-between;gap:var(--space-md);flex-wrap:wrap}.palette-actions__group{display:flex;align-items:center;gap:var(--space-sm)}.palette-actions__export-dropdown{position:relative}.palette-actions__export-menu{position:absolute;top:100%;right:0;margin-top:var(--space-sm);background:var(--dropdown-bg);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border:1px solid var(--glass-border);border-radius:var(--glass-radius-sm);padding:var(--space-xs);min-width:160px;opacity:0;visibility:hidden;transform:translateY(-4px);transition:all var(--transition-base);z-index:var(--z-dropdown);box-shadow:0 12px 40px #0006}.palette-actions__export-dropdown:hover .palette-actions__export-menu,.palette-actions__export-dropdown:focus-within .palette-actions__export-menu{opacity:1;visibility:visible;transform:translateY(0)}.palette-actions__export-menu button{display:block;width:100%;text-align:left;padding:8px 12px;font-size:var(--font-sm);color:var(--text-secondary);border-radius:var(--glass-radius-xs);transition:all var(--transition-fast);cursor:pointer;background:none;border:none}.palette-actions__export-menu button:hover{color:var(--text-primary);background:rgba(var(--glass-tint-rgb),.08)}@media(max-width:600px){.palette-actions{flex-direction:column;align-items:stretch}.palette-actions__group{justify-content:center}}.glass-card{background:var(--glass-bg);backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));border:1px solid var(--glass-border);border-radius:var(--glass-radius);box-shadow:var(--glass-shadow);position:relative;overflow:hidden;transition:all var(--transition-base)}.glass-card__reflection{position:absolute;top:0;left:0;right:0;height:50%;background:var(--glass-reflection);pointer-events:none;z-index:0;opacity:.6;transition:opacity var(--transition-base)}.glass-card--hoverable:hover{background:var(--glass-bg-hover);border-color:var(--glass-border-hover);box-shadow:var(--glass-shadow-hover);transform:translateY(-2px)}.glass-card--hoverable:hover .glass-card__reflection{opacity:1}.glass-card--hoverable:active{transform:translateY(0) scale(.99)}.glass-card>*:not(.glass-card__reflection){position:relative;z-index:1}.tints-shades{animation:fadeInUp .4s ease .1s backwards}.tints-shades__title{font-size:var(--font-xs);color:var(--text-secondary);text-transform:uppercase;letter-spacing:.08em;font-weight:600;margin-bottom:var(--space-md)}.tints-shades__section{margin-bottom:var(--space-md)}.tints-shades__section:last-child{margin-bottom:0}.tints-shades__label{display:block;font-size:var(--font-xs);color:var(--text-tertiary);margin-bottom:var(--space-sm)}.tints-shades__scale{display:flex;border-radius:var(--glass-radius-sm);overflow:hidden}.tints-shades__swatch{flex:1;min-height:48px;display:flex;align-items:center;justify-content:center;cursor:pointer;border:none;transition:all var(--transition-base);position:relative}.tints-shades__swatch:hover{transform:scaleY(1.15);z-index:2;box-shadow:0 4px 12px #0000004d}.tints-shades__swatch-text{font-size:.55rem;font-weight:600;font-family:var(--font-mono);opacity:0;transition:opacity var(--transition-fast)}.tints-shades__swatch:hover .tints-shades__swatch-text{opacity:.8}.tints-shades__swatch--base{flex:1.5;border:2px solid rgba(var(--glass-tint-rgb),.2)}@media(max-width:768px){.tints-shades__swatch{min-height:36px}.tints-shades__swatch-text{display:none}}.contrast-checker{animation:fadeInUp .4s ease .2s backwards}.contrast-checker__title{font-size:var(--font-xs);color:var(--text-secondary);text-transform:uppercase;letter-spacing:.08em;font-weight:600;margin-bottom:var(--space-md)}.contrast-checker__preview-section{display:flex;gap:8px;margin-bottom:10px;align-items:stretch}.contrast-checker__preview{flex:1;padding:10px;border-radius:var(--glass-radius-sm);border:1px solid var(--glass-border);transition:all var(--transition-base);min-width:0}.contrast-checker__preview-large{font-size:var(--font-sm);font-weight:700;margin-bottom:4px}.contrast-checker__preview-normal{font-size:.65rem;line-height:1.5;opacity:.9}.contrast-checker__ratio-display{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:8px 12px;background:rgba(var(--glass-tint-rgb),.03);border-radius:var(--glass-radius-sm);border:1px solid var(--glass-border);flex-shrink:0;min-width:80px}.contrast-checker__ratio-row{display:flex;align-items:baseline;gap:4px;white-space:nowrap}.contrast-checker__ratio-number{font-size:var(--font-lg);font-weight:800;font-family:var(--font-mono);letter-spacing:-.03em}.contrast-checker__ratio-separator{font-size:.65rem;color:var(--text-tertiary)}.contrast-checker__ratio-one{font-size:var(--font-sm);font-weight:600;color:var(--text-secondary)}.contrast-checker__rating{margin-top:var(--space-sm);padding:3px 10px;border-radius:20px;font-size:var(--font-xs);font-weight:700;text-transform:uppercase}.contrast-checker__rating--pass{color:var(--success);background:var(--success-bg)}.contrast-checker__rating--fail{color:var(--error);background:var(--error-bg)}.contrast-checker__inputs{display:flex;flex-direction:column;gap:8px;margin-bottom:10px}.contrast-checker__input-group{flex:1}.contrast-checker__input-label{display:block;font-size:var(--font-xs);color:var(--text-secondary);text-transform:uppercase;letter-spacing:.06em;font-weight:600;margin-bottom:var(--space-xs)}.contrast-checker__color-input{display:flex;align-items:center;gap:6px;background:rgba(var(--glass-tint-rgb),.04);border:1px solid var(--glass-border);border-radius:var(--glass-radius-xs);padding:6px 8px;overflow:hidden}.contrast-checker__color-picker{width:28px;height:28px;border:2px solid var(--glass-border);border-radius:6px;cursor:pointer;background:none;padding:0}.contrast-checker__color-picker::-webkit-color-swatch-wrapper{padding:0}.contrast-checker__color-picker::-webkit-color-swatch{border:none;border-radius:4px}.contrast-checker__hex-input{font-family:var(--font-mono);font-size:var(--font-sm);color:var(--text-primary);background:none;border:none;flex:1;min-width:0}.contrast-checker__copy-btn{display:flex;align-items:center;justify-content:center;background:none;border:none;color:var(--text-tertiary);cursor:pointer;padding:4px;border-radius:4px;transition:color var(--transition-base),background var(--transition-base);flex-shrink:0}.contrast-checker__copy-btn:hover{color:var(--text-primary);background:rgba(var(--glass-tint-rgb),.08)}.contrast-checker__badges{display:grid;grid-template-columns:repeat(2,1fr);gap:4px}.compliance-badge{display:flex;align-items:center;justify-content:center;gap:4px;padding:6px;border-radius:var(--glass-radius-xs);font-size:.6rem;font-weight:600;border:1px solid}.compliance-badge--pass{color:var(--success);background:var(--success-bg);border-color:#34d39933}.compliance-badge--fail{color:var(--error);background:var(--error-bg);border-color:#f8717133}@media(max-width:768px){.contrast-checker__preview-section,.contrast-checker__inputs{flex-direction:column}.contrast-checker__badges{grid-template-columns:repeat(2,1fr)}}.pg{display:flex;flex-direction:column;gap:10px;height:calc(100vh - var(--header-height) - 80px);min-height:560px;animation:fadeIn .3s ease}.pg__topbar{display:flex;align-items:center;justify-content:space-between;gap:var(--space-md);flex-shrink:0}.pg__title{font-size:var(--font-lg);font-weight:700;letter-spacing:-.03em;background:linear-gradient(135deg,var(--text-primary),var(--text-secondary));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.pg__hint{font-size:.7rem;color:var(--text-tertiary);margin-top:2px}.pg__hint kbd{display:inline-flex;padding:0 5px;background:rgba(var(--glass-tint-rgb),.06);border:1px solid rgba(var(--glass-tint-rgb),.1);border-radius:3px;font-family:var(--font-mono);font-size:.6rem}.pg__topbar-right{display:flex;align-items:flex-end;gap:10px}.pg__actions-row{display:flex;align-items:center;gap:10px}.pg__cb-toggle{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:8px;background:rgba(var(--glass-tint-rgb),.05);border:1px solid rgba(var(--glass-tint-rgb),.1);color:var(--text-secondary);cursor:pointer;transition:all .15s;flex-shrink:0}.pg__cb-toggle:hover{background:#6c63ff1f;border-color:#6c63ff40;color:var(--accent)}.pg__cb-toggle--active{background:#6c63ff33;border-color:var(--accent);color:var(--accent);box-shadow:0 0 12px #6c63ff4d}.pg__cb-section{display:flex;flex-direction:column;gap:6px;flex-shrink:0;animation:fadeIn .2s ease}.pg__cb-header{display:flex;align-items:center;justify-content:space-between;gap:var(--space-md)}.pg__cb-title{font-size:var(--font-sm);font-weight:600;color:var(--text-secondary)}.pg__cb-tabs{display:flex;flex-wrap:wrap;gap:var(--space-xs);background:rgba(var(--glass-tint-rgb),.03);border:1px solid var(--glass-border);border-radius:var(--glass-radius-sm);padding:4px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);flex-shrink:1;min-width:0}.pg__cb-tab{padding:6px 12px;border-radius:var(--glass-radius-xs);font-size:var(--font-xs);font-weight:500;color:var(--text-secondary);background:transparent;border:1px solid transparent;cursor:pointer;transition:all var(--transition-base);white-space:nowrap}.pg__cb-tab:hover{color:var(--text-primary);background:rgba(var(--glass-tint-rgb),.06)}.pg__cb-tab--active{color:var(--text-primary);background:#6c63ff26;border-color:#6c63ff4d;box-shadow:0 0 12px #6c63ff1a}.pg__cards--cb{gap:8px}.pg__cb-card{border-radius:var(--glass-radius);min-height:100px;display:flex;align-items:flex-end;padding:8px 12px;cursor:pointer;transition:all .15s;border:2px solid transparent;position:relative}.pg__cb-card:hover{transform:translateY(-2px);box-shadow:0 4px 12px #0000004d}.pg__cb-card--selected{border-color:rgba(var(--glass-tint-rgb),.5);box-shadow:0 0 16px rgba(var(--glass-tint-rgb),.15)}.pg__cb-card-hex{font-family:var(--font-mono);font-size:.7rem;font-weight:600}.pg__cards{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;flex-shrink:0}.pg__cards .color-card{min-height:130px}.pg__cards .color-card__overlay{min-height:130px;padding:10px 12px}.pg__bottom{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;flex:1;min-height:0;overflow:hidden}.pg__info{display:flex;flex-direction:column;gap:8px;align-self:start}.pg__info-header{display:flex;align-items:center;gap:10px}.pg__info-text{flex:1;min-width:0}.pg__picker-btn{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:8px;background:rgba(var(--glass-tint-rgb),.05);border:1px solid rgba(var(--glass-tint-rgb),.1);color:var(--text-secondary);cursor:pointer;transition:all .15s;flex-shrink:0}.pg__picker-btn:hover{background:#6c63ff26;border-color:#6c63ff4d;color:var(--accent)}.pg__info-swatch{width:40px;height:40px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .2s;position:relative}.pg__info-swatch:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(var(--glass-tint-rgb),.15) 0%,transparent 50%);border-radius:8px;pointer-events:none}.pg__info-idx{font-size:.7rem;font-weight:800;position:relative;z-index:1}.pg__info-name{font-size:var(--font-md);font-weight:700;line-height:1.2}.pg__info-hex{font-family:var(--font-mono);font-size:.7rem;color:var(--text-secondary)}.pg__formats{display:flex;flex-direction:column;gap:3px}.pg__fmt{display:flex;align-items:center;gap:6px;padding:5px 8px;background:rgba(var(--glass-tint-rgb),.03);border:1px solid rgba(var(--glass-tint-rgb),.05);border-radius:6px;cursor:pointer;transition:all .15s}.pg__fmt:hover{background:rgba(var(--glass-tint-rgb),.07);border-color:rgba(var(--glass-tint-rgb),.1)}.pg__fmt-label{font-size:.55rem;font-weight:700;color:var(--accent);text-transform:uppercase;min-width:30px}.pg__fmt-value{flex:1;font-family:var(--font-mono);font-size:.65rem;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pg__fmt-icon{color:var(--text-tertiary);opacity:0;transition:opacity .15s;flex-shrink:0}.pg__fmt:hover .pg__fmt-icon{opacity:1}.pg__mid-col{display:flex;flex-direction:column;gap:10px;min-height:0;overflow-y:auto}.pg__tints .tints-shades{animation:none}.pg__tints .tints-shades__swatch{min-height:22px}.pg__gradient{display:flex;flex-direction:column;overflow:hidden;flex-shrink:0}.pg__gradient-preview{width:100%;height:60px;transition:background .3s;position:relative}.pg__gradient-preview:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(var(--glass-tint-rgb),.08) 0%,transparent 50%);pointer-events:none}.pg__gradient-footer{display:flex;align-items:center;justify-content:space-between;padding:8px 12px}.pg__gradient-colors{display:flex;align-items:center;gap:6px}.pg__gradient-dot{width:16px;height:16px;border-radius:50%;border:2px solid rgba(var(--glass-tint-rgb),.2);transition:background .2s}.pg__gradient-label{font-size:.6rem;color:var(--text-tertiary);margin-left:2px}.pg__contrast{min-height:0;overflow-y:auto}.pg__contrast .contrast-checker{animation:none}.pg__contrast .contrast-checker__preview-section{gap:8px;margin-bottom:8px}.pg__contrast .contrast-checker__preview{padding:10px}.pg__contrast .contrast-checker__preview-large{font-size:var(--font-sm);margin-bottom:4px}.pg__contrast .contrast-checker__preview-normal{font-size:.65rem;line-height:1.4}.pg__contrast .contrast-checker__ratio-display{padding:8px;min-width:70px}.pg__contrast .contrast-checker__ratio-number{font-size:var(--font-md)}.pg__contrast .contrast-checker__ratio-one{font-size:var(--font-sm)}.pg__contrast .contrast-checker__inputs{gap:8px;margin-bottom:8px}.pg__contrast .contrast-checker__badges{grid-template-columns:1fr 1fr;gap:4px}.pg__contrast .compliance-badge{padding:5px;font-size:.6rem}@media(max-width:1100px){.pg__bottom{grid-template-columns:1fr 1fr}.pg__info{grid-column:1 / -1}.pg__formats{flex-direction:row;flex-wrap:wrap;gap:4px}.pg__fmt{flex:1;min-width:120px}}@media(max-width:768px){.pg{height:auto;min-height:unset}.pg__topbar{flex-direction:column;align-items:flex-start}.pg__cb-header{flex-direction:column;align-items:flex-start;gap:var(--space-sm)}.pg__cb-tabs{width:100%;gap:2px}.pg__cb-tab{padding:5px 8px;font-size:.65rem}.pg__cards{grid-template-columns:repeat(5,1fr);gap:6px}.pg__cards .color-card,.pg__cards .color-card__overlay{min-height:90px}.pg__bottom{grid-template-columns:1fr}}@media(max-width:500px){.pg__cards{grid-template-columns:repeat(3,1fr)}}.glass-input-wrapper{display:flex;flex-direction:column;gap:var(--space-xs)}.glass-input__label{font-size:var(--font-xs);color:var(--text-secondary);text-transform:uppercase;letter-spacing:.08em;font-weight:600}.glass-input__container{display:flex;align-items:center;gap:var(--space-sm);background:rgba(var(--glass-tint-rgb),.04);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid var(--glass-border);border-radius:var(--glass-radius-xs);padding:10px 14px;transition:all var(--transition-base)}.glass-input__container:focus-within{border-color:#6c63ff66;box-shadow:0 0 0 3px #6c63ff1a;background:rgba(var(--glass-tint-rgb),.06)}.glass-input__icon{display:flex;align-items:center;color:var(--text-secondary);flex-shrink:0}.glass-input{flex:1;background:none;border:none;outline:none;color:var(--text-primary);font-size:var(--font-sm);font-family:var(--font-mono);min-width:0}.glass-input::placeholder{color:var(--text-tertiary)}.cp{display:flex;flex-direction:column;gap:10px;height:calc(100vh - var(--header-height) - 80px);min-height:500px;animation:fadeIn .3s ease}.cp__topbar{flex-shrink:0}.cp__title{font-size:var(--font-lg);font-weight:700;letter-spacing:-.03em;background:linear-gradient(135deg,var(--text-primary),var(--text-secondary));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.cp__subtitle{font-size:.7rem;color:var(--text-tertiary);margin-top:2px}.cp__body{display:grid;grid-template-columns:1fr 1.3fr 1fr;gap:10px;flex:1;min-height:0;overflow:hidden}.cp__wheel-panel{display:flex;flex-direction:column;gap:10px;align-self:start}.cp__wheel-wrap{display:flex;align-items:center;justify-content:center;flex-shrink:0}.cp__wheel-container{position:relative;width:100%;max-width:240px;display:flex}.cp__wheel{width:100%;height:auto;border-radius:50%;cursor:crosshair;box-shadow:0 0 30px #0000004d}.cp__wheel-dot{position:absolute;width:12px;height:12px;border:2px solid #fff;border-radius:50%;transform:translate(-50%,-50%);pointer-events:none;box-shadow:0 0 4px #00000080,inset 0 0 4px #0000004d}.cp__swatch{height:48px;border-radius:8px;display:flex;align-items:flex-end;padding:8px 12px;position:relative;transition:background .2s;flex-shrink:0}.cp__swatch:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(var(--glass-tint-rgb),.1) 0%,transparent 50%);border-radius:8px;pointer-events:none}.cp__swatch-text{font-weight:600;font-size:.75rem;position:relative;z-index:1}.cp__controls{display:flex;flex-direction:column;gap:8px}.cp__tools-row{display:flex;align-items:center;gap:8px}.cp__native-label{display:flex;align-items:center;gap:6px;font-size:.7rem;color:var(--text-secondary);cursor:pointer}.cp__native-picker{width:26px;height:26px;border:2px solid var(--glass-border);border-radius:6px;cursor:pointer;background:none;padding:0}.cp__native-picker::-webkit-color-swatch-wrapper{padding:0}.cp__native-picker::-webkit-color-swatch{border:none;border-radius:4px}.cp__apply{display:flex;flex-direction:column;gap:4px}.cp__apply-label{font-size:.6rem;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.06em;font-weight:600}.cp__apply-slots{display:flex;gap:6px}.cp__slot-btn{display:flex;flex-direction:column;align-items:center;gap:3px;padding:4px;background:rgba(var(--glass-tint-rgb),.04);border:1px solid rgba(var(--glass-tint-rgb),.08);border-radius:8px;cursor:pointer;transition:all .15s;min-width:36px}.cp__slot-btn:hover{background:rgba(var(--glass-tint-rgb),.1);border-color:rgba(var(--glass-tint-rgb),.2);transform:translateY(-1px)}.cp__slot-color{width:24px;height:24px;border-radius:6px;border:1px solid rgba(var(--glass-tint-rgb),.15);transition:background .2s}.cp__slot-num{font-size:.55rem;font-weight:700;color:var(--text-tertiary)}.cp__mid-col{display:flex;flex-direction:column;gap:10px;min-height:0;overflow-y:auto}.cp__info{display:flex;flex-direction:column;gap:8px}.cp__info-header{display:flex;align-items:center;gap:10px}.cp__info-swatch{width:36px;height:36px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .2s}.cp__info-idx{font-size:.6rem;position:relative;z-index:1}.cp__info-name{font-size:var(--font-md);font-weight:700;line-height:1.2}.cp__info-hex{font-family:var(--font-mono);font-size:.7rem;color:var(--text-secondary)}.cp__formats{display:flex;flex-direction:column;gap:3px}.cp__fmt{display:flex;align-items:center;gap:6px;padding:4px 8px;background:rgba(var(--glass-tint-rgb),.03);border:1px solid rgba(var(--glass-tint-rgb),.05);border-radius:6px;cursor:pointer;transition:all .15s}.cp__fmt:hover{background:rgba(var(--glass-tint-rgb),.07);border-color:rgba(var(--glass-tint-rgb),.1)}.cp__fmt-label{font-size:.5rem;font-weight:700;color:var(--accent);text-transform:uppercase;min-width:28px}.cp__fmt-value{flex:1;font-family:var(--font-mono);font-size:.6rem;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cp__fmt-icon{color:var(--text-tertiary);opacity:0;transition:opacity .15s;flex-shrink:0}.cp__fmt:hover .cp__fmt-icon{opacity:1}.cp__tints .tints-shades{animation:none}.cp__tints .tints-shades__swatch{min-height:22px}.cp__contrast{min-height:0;overflow-y:auto}.cp__contrast .contrast-checker{animation:none}@media(max-width:1100px){.cp__body{grid-template-columns:1fr 1fr}.cp__wheel-panel{grid-column:1 / -1;flex-direction:row;align-items:start}.cp__wheel-wrap{max-width:250px}}@media(max-width:768px){.cp{height:auto;min-height:unset}.cp__body{grid-template-columns:1fr}.cp__wheel-panel{flex-direction:column;align-items:stretch}.cp__wheel-wrap{max-width:100%}.cp__wheel-container{max-width:280px;margin:0 auto}}@media(max-width:420px){.cp__wheel-container{max-width:220px}.cp__swatch{height:40px}.cp__apply-slots{flex-wrap:wrap}.cp__slot-btn{min-width:32px;padding:3px}.cp__tools-row{flex-wrap:wrap}}.gradient-builder{animation:fadeIn .4s ease}.gradient-builder__title{font-size:var(--font-2xl);font-weight:700;letter-spacing:-.03em;margin-bottom:var(--space-xs);background:linear-gradient(135deg,var(--text-primary) 0%,var(--text-secondary) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.gradient-builder__subtitle{font-size:var(--font-sm);color:var(--text-secondary);margin-bottom:var(--space-xl)}.gradient-builder__content{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-xl);align-items:start}.gradient-builder__preview-card{position:sticky;top:calc(var(--header-height) + var(--space-lg))}.gradient-builder__preview{height:400px;border-radius:var(--glass-radius) var(--glass-radius) 0 0;transition:background .15s ease;position:relative}.gradient-builder__preview:after{content:"";position:absolute;top:0;left:0;right:0;height:30%;background:linear-gradient(180deg,rgba(var(--glass-tint-rgb),.06) 0%,transparent 100%);pointer-events:none}.gradient-builder__preview-overlay{padding:var(--space-md);display:flex;justify-content:flex-end}.gradient-builder__controls{display:flex;flex-direction:column;gap:var(--space-lg)}.gb-label{display:block;font-size:var(--font-xs);color:var(--text-secondary);text-transform:uppercase;letter-spacing:.08em;font-weight:600;margin-bottom:var(--space-xs)}.gb-top-row{display:flex;gap:var(--space-lg);align-items:flex-start}.gb-type-selector{flex:1}.gb-type-options{display:flex;gap:var(--space-xs);background:rgba(var(--glass-tint-rgb),.03);border:1px solid var(--glass-border);border-radius:var(--glass-radius-sm);padding:4px}.gb-type-btn{flex:1;padding:8px 14px;border-radius:var(--glass-radius-xs);font-size:var(--font-sm);font-weight:500;color:var(--text-secondary);cursor:pointer;transition:all var(--transition-base);background:transparent;border:1px solid transparent}.gb-type-btn:hover{color:var(--text-primary)}.gb-type-btn--active{color:var(--text-primary);background:#6c63ff26;border-color:#6c63ff4d}.gb-angle__controls{display:flex;align-items:center;gap:var(--space-sm)}.gb-angle__dial{width:48px;height:48px;position:relative}.gb-angle__dial-track{width:100%;height:100%;border-radius:50%;background:rgba(var(--glass-tint-rgb),.05);border:2px solid var(--glass-border);position:relative;display:flex;align-items:center;justify-content:center;touch-action:none}.gb-angle__dial-knob{position:absolute;width:100%;height:100%;cursor:grab;transition:none}.gb-angle__dial-knob:active{cursor:grabbing}.gb-angle__dial-dot{position:absolute;top:4px;left:50%;transform:translate(-50%);width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px var(--accent-glow)}.gb-angle__input{width:52px;padding:6px 8px;background:rgba(var(--glass-tint-rgb),.04);border:1px solid var(--glass-border);border-radius:var(--glass-radius-xs);color:var(--text-primary);font-family:var(--font-mono);font-size:var(--font-sm);text-align:center}.gb-angle__input:focus{border-color:#6c63ff66;box-shadow:0 0 0 3px #6c63ff1a}.gb-angle__deg{font-size:var(--font-sm);color:var(--text-tertiary)}.gb-bar-section{margin-top:var(--space-xs)}.gb-bar{position:relative;height:24px;border-radius:12px;cursor:crosshair;border:2px solid rgba(var(--glass-tint-rgb),.15);box-shadow:0 2px 8px #0000004d;touch-action:none}.gb-bar__handle{position:absolute;top:50%;transform:translate(-50%,-50%);width:22px;height:22px;border-radius:50%;cursor:grab;z-index:2;border:3px solid rgba(255,255,255,.9);box-shadow:0 1px 4px #0006;transition:box-shadow .15s ease,transform .1s ease}.gb-bar__handle:active{cursor:grabbing;transform:translate(-50%,-50%) scale(1.15)}.gb-bar__handle--selected{border-color:#fff;box-shadow:0 0 0 3px #6c63ff80,0 2px 8px #0006;z-index:3}.gb-bar__handle-inner{width:100%;height:100%;border-radius:50%}.gb-picker-section{margin-top:var(--space-xs)}.gb-picker-row{display:grid;grid-template-columns:auto 1fr;gap:var(--space-lg)}.gb-picker{display:flex;flex-direction:column;gap:var(--space-sm)}.gb-sb-canvas-wrap{position:relative;width:220px;height:150px;border-radius:var(--glass-radius-xs);overflow:hidden;cursor:crosshair;border:1px solid var(--glass-border);touch-action:none}.gb-sb-canvas{display:block;width:100%;height:100%}.gb-sb-marker{position:absolute;width:16px;height:16px;border-radius:50%;border:2px solid white;box-shadow:0 0 4px #00000080,inset 0 0 2px #0000004d;transform:translate(-50%,-50%);pointer-events:none}.gb-hue-slider{position:relative;height:16px;border-radius:8px;cursor:pointer;border:1px solid var(--glass-border);overflow:visible;touch-action:none}.gb-hue-slider__track{width:100%;height:100%;border-radius:8px;background:linear-gradient(to right,red,#ff0,#0f0,#0ff,#00f,#f0f,red)}.gb-hue-slider__thumb{position:absolute;top:50%;transform:translate(-50%,-50%);width:18px;height:18px;border-radius:50%;border:3px solid white;box-shadow:0 1px 4px #0006;cursor:grab;pointer-events:none}.gb-stops-list{display:flex;flex-direction:column;gap:var(--space-sm);min-width:0}.gb-stops-list__header{display:flex;align-items:center;justify-content:space-between}.gb-stops-list__header .gb-label{margin-bottom:0}.gb-add-btn{display:flex;align-items:center;gap:4px;padding:4px 10px;font-size:var(--font-xs);color:var(--text-secondary);background:rgba(var(--glass-tint-rgb),.05);border:1px solid var(--glass-border);border-radius:var(--glass-radius-xs);cursor:pointer;transition:all var(--transition-fast)}.gb-add-btn:hover{color:var(--text-primary);background:rgba(var(--glass-tint-rgb),.08)}.gb-stop-item{display:flex;align-items:center;gap:var(--space-sm);padding:8px 10px;background:rgba(var(--glass-tint-rgb),.03);border:1px solid rgba(var(--glass-tint-rgb),.06);border-radius:var(--glass-radius-xs);cursor:pointer;transition:all var(--transition-fast)}.gb-stop-item:hover{background:rgba(var(--glass-tint-rgb),.06)}.gb-stop-item--selected{background:#6c63ff1a;border-color:#6c63ff40}.gb-stop-item__swatch{width:28px;height:28px;border-radius:6px;border:2px solid rgba(var(--glass-tint-rgb),.15);flex-shrink:0}.gb-stop-item__hex{flex:1;font-family:var(--font-mono);font-size:var(--font-sm);color:var(--text-primary);background:none;border:none;outline:none;min-width:0}.gb-stop-item__pos{width:42px;padding:3px 6px;background:rgba(var(--glass-tint-rgb),.04);border:1px solid rgba(var(--glass-tint-rgb),.08);border-radius:4px;font-family:var(--font-mono);font-size:var(--font-xs);color:var(--text-secondary);text-align:center}.gb-stop-item__pos:focus{border-color:#6c63ff66}.gb-stop-item__remove{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;color:var(--text-tertiary);cursor:pointer;transition:all var(--transition-fast);background:none;border:none;flex-shrink:0}.gb-stop-item__remove:hover{color:var(--error);background:var(--error-bg)}.gb-actions{display:flex;gap:var(--space-sm)}.gb-code__block{background:rgba(var(--glass-tint-rgb),.06);border:1px solid var(--glass-border);border-radius:var(--glass-radius-xs);padding:var(--space-md);overflow-x:auto}.gb-code__block code{font-family:var(--font-mono);font-size:var(--font-sm);color:var(--accent);line-height:1.6;word-break:break-all}@media(max-width:1000px){.gradient-builder__content{grid-template-columns:1fr}.gradient-builder__preview-card{position:static}.gradient-builder__preview{height:260px}}@media(max-width:700px){.gb-picker-row{grid-template-columns:1fr}.gb-sb-canvas-wrap{width:100%}.gb-top-row{flex-direction:column}}.saved-palettes{animation:fadeIn .4s ease}.saved-palettes__title{font-size:var(--font-2xl);font-weight:700;letter-spacing:-.03em;margin-bottom:var(--space-xs);background:linear-gradient(135deg,var(--text-primary) 0%,var(--text-secondary) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.saved-palettes__subtitle{font-size:var(--font-sm);color:var(--text-secondary);margin-bottom:var(--space-xl)}.saved-palettes__section{margin-bottom:var(--space-2xl)}.saved-palettes__section-title{display:flex;align-items:center;gap:var(--space-sm);font-size:var(--font-md);font-weight:600;color:var(--text-primary);margin-bottom:var(--space-md)}.saved-palettes__count{font-size:var(--font-xs);color:var(--text-tertiary);background:rgba(var(--glass-tint-rgb),.06);padding:2px 8px;border-radius:10px;font-weight:500}.saved-palettes__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:var(--space-md)}.saved-palettes__empty{text-align:center;color:var(--text-secondary)}.saved-palettes__empty-icon{color:var(--text-tertiary);margin:0 auto var(--space-md);opacity:.5}.saved-palettes__empty-hint{font-size:var(--font-xs);color:var(--text-tertiary);margin-top:var(--space-xs)}.palette-mini-card{cursor:pointer}.palette-mini-card__colors{display:flex;height:80px}.palette-mini-card__color{flex:1;transition:background var(--transition-base)}.palette-mini-card__color:first-child{border-radius:var(--glass-radius) 0 0 0}.palette-mini-card__color:last-child{border-radius:0 var(--glass-radius) 0 0}.palette-mini-card__footer{display:flex;align-items:center;justify-content:space-between;padding:var(--space-sm) var(--space-md)}.palette-mini-card__mode{font-size:var(--font-xs);color:var(--text-tertiary);text-transform:capitalize}.palette-mini-card__time{font-size:var(--font-xs);color:var(--text-tertiary)}.palette-mini-card__actions{display:flex;gap:var(--space-xs)}.palette-mini-card__btn{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;color:var(--text-tertiary);cursor:pointer;transition:all var(--transition-fast);background:none;border:none}.palette-mini-card__btn:hover{color:var(--text-primary);background:rgba(var(--glass-tint-rgb),.08)}.palette-mini-card__btn--fav{color:var(--accent-secondary)}.palette-mini-card__btn--delete:hover{color:var(--error);background:var(--error-bg)}@media(max-width:600px){.saved-palettes__grid{grid-template-columns:1fr}}.extractor{display:flex;gap:var(--space-xl);height:calc(100vh - var(--header-height) - 40px);min-height:500px;animation:fadeIn .3s ease;padding-bottom:20px}.extractor__sidebar{width:320px;flex-shrink:0;display:flex;flex-direction:column}.extractor__control-card{height:100%;display:flex;flex-direction:column}.extractor__title{font-size:var(--font-xl);font-weight:700;margin-bottom:8px;background:linear-gradient(135deg,var(--text-primary),var(--text-secondary));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.extractor__desc{font-size:var(--font-sm);color:var(--text-secondary);margin-bottom:var(--space-xl)}.extractor__upload-wrapper{margin-bottom:var(--space-xl)}.extractor__file-input{display:none}.extractor__upload-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:12px;background:rgba(var(--glass-tint-rgb),.05);border:1px dashed rgba(var(--glass-tint-rgb),.2);border-radius:var(--glass-radius-sm);color:var(--text-primary);font-size:var(--font-sm);font-weight:600;cursor:pointer;transition:all .2s}.extractor__upload-btn:hover{background:rgba(var(--glass-tint-rgb),.08);border-color:rgba(var(--glass-tint-rgb),.3)}.extractor__palette-preview{margin-bottom:auto}.extractor__palette-label{display:block;font-size:.7rem;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.05em;font-weight:600;margin-bottom:12px}.extractor__palette-blocks{display:flex;background:rgba(var(--glass-tint-rgb),.03);border:1px solid rgba(var(--glass-tint-rgb),.08);border-radius:12px;overflow:hidden;height:48px}.extractor__palette-block{flex:1;display:flex;align-items:center;justify-content:center;transition:background .15s ease}.extractor__palette-block span{font-size:.6rem;font-weight:700;opacity:.7}.extractor__apply-btn{width:100%;margin-top:var(--space-xl);padding:14px;font-size:var(--font-sm)}.extractor__main{flex:1;min-width:0;display:flex;flex-direction:column}.extractor__preview-card{flex:1;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}.extractor__empty-state{display:flex;flex-direction:column;align-items:center;gap:16px;color:var(--text-secondary);text-align:center}.extractor__empty-icon{width:80px;height:80px;border-radius:50%;background:rgba(var(--glass-tint-rgb),.03);border:1px solid rgba(var(--glass-tint-rgb),.05);display:flex;align-items:center;justify-content:center;color:var(--text-tertiary)}.extractor__image-container{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;overflow:hidden}.extractor__image-wrapper{position:relative;max-width:100%;max-height:100%}.extractor__image{max-width:100%;max-height:100%;object-fit:contain;border-radius:var(--glass-radius-sm);user-select:none;pointer-events:none}.extractor__marker{position:absolute;width:28px;height:28px;transform:translate(-50%,-50%);border-radius:50%;border:3px solid #fff;cursor:grab;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px #00000080,inset 0 0 6px #0000004d;transition:transform .1s ease-out;touch-action:none}.extractor__marker:active,.extractor__marker--dragging{cursor:grabbing;transform:translate(-50%,-50%) scale(1.1);transition:none;z-index:10}.extractor__marker-inner{width:100%;height:100%;border-radius:50%;display:flex;align-items:center;justify-content:center}.extractor__marker-num{font-size:.6rem;font-weight:800}@media(max-width:900px){.extractor{flex-direction:column;height:auto}.extractor__sidebar{width:100%}.extractor__preview-card{min-height:50vh}}.svgr{display:flex;gap:var(--space-xl);height:calc(100vh - var(--header-height) - 40px);min-height:600px;animation:fadeIn .3s ease;padding-bottom:20px}.svgr__sidebar{width:340px;flex-shrink:0;display:flex;flex-direction:column}.svgr__control-card{height:100%;display:flex;flex-direction:column;overflow-y:auto}.svgr__empty-sidebar{display:flex;flex-direction:column;justify-content:center;height:100%}.svgr__title{font-size:var(--font-2xl);font-weight:800;margin-bottom:8px;letter-spacing:-.02em}.svgr__desc{font-size:var(--font-sm);color:var(--text-secondary);line-height:1.5;margin-bottom:var(--space-2xl)}.svgr__start-btn{width:100%;padding:14px;font-weight:600}.svgr__section{display:flex;flex-direction:column;gap:16px}.svgr__section-header{display:flex;align-items:center;gap:8px;color:var(--text-primary)}.svgr__section-header h3{font-size:var(--font-md);font-weight:700;margin:0}.svgr__color-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}.svgr__color-wrap{position:relative;aspect-ratio:1;border-radius:8px;overflow:hidden;cursor:pointer;box-shadow:inset 0 0 0 1px rgba(var(--glass-tint-rgb),.1)}.svgr__native-color{position:absolute;top:-10px;left:-10px;width:200%;height:200%;opacity:0;cursor:pointer;z-index:2}.svgr__color-swatch{width:100%;height:100%;border-radius:8px;transition:transform .2s}.svgr__color-wrap:hover .svgr__color-swatch{transform:scale(1.1)}.svgr__divider{border:none;border-top:1px solid rgba(var(--glass-tint-rgb),.05);margin:var(--space-xl) 0}.svgr__action-btn{width:100%;justify-content:center;padding:12px;font-size:var(--font-sm);margin-bottom:var(--space-lg)}.svgr__smart-toggle{display:flex;align-items:center;justify-content:space-between;font-size:var(--font-sm);color:var(--text-secondary);font-weight:500}.svgr__switch{position:relative;display:inline-block;width:36px;height:20px}.svgr__switch input{opacity:0;width:0;height:0}.svgr__slider-round{position:absolute;cursor:pointer;inset:0;background-color:rgba(var(--glass-tint-rgb),.2);transition:.3s;border-radius:20px}.svgr__slider-round:before{position:absolute;content:"";height:14px;width:14px;left:3px;bottom:3px;background-color:#fff;transition:.3s;border-radius:50%}input:checked+.svgr__slider-round{background-color:var(--accent)}input:checked+.svgr__slider-round:before{transform:translate(16px)}.svgr__slider-group{display:flex;flex-direction:column;gap:8px;margin-bottom:8px}.svgr__slider-header{display:flex;justify-content:space-between;font-size:var(--font-xs);color:var(--text-secondary);font-weight:600}.svgr__slider{-webkit-appearance:none;width:100%;height:6px;border-radius:3px;outline:none;touch-action:none;cursor:pointer}.svgr__slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:#fff;cursor:grab;box-shadow:0 2px 6px #0000004d;border:2px solid var(--card-bg);transition:transform .1s ease}.svgr__slider:active::-webkit-slider-thumb{cursor:grabbing;transform:scale(1.15)}.svgr__slider::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:#fff;cursor:grab;box-shadow:0 2px 6px #0000004d;border:2px solid var(--card-bg)}.svgr__slider::-moz-range-track{height:6px;border-radius:3px;background:transparent}.svgr__main{flex:1;display:flex;flex-direction:column;min-width:0;background:var(--card-bg);border:1px solid var(--border-color);border-radius:var(--glass-radius);overflow:hidden}.svgr__preview-area{flex:1;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;background:repeating-conic-gradient(rgba(var(--glass-tint-rgb),.02) 0% 25%,transparent 0% 50%) 50% / 20px 20px}.svgr__empty-main{display:flex;flex-direction:column;align-items:center;gap:16px;color:var(--text-tertiary)}.svgr__empty-icon{opacity:.5}.svgr__svg-container{width:100%;height:100%;display:flex;align-items:center;justify-content:center;padding:40px}.svgr__svg-container svg{max-width:100%;max-height:100%;width:auto;height:auto;filter:drop-shadow(0 10px 20px rgba(0,0,0,.1))}.svgr__toolbar{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 var(--space-xl);border-top:1px solid var(--border-color);background:rgba(var(--glass-tint-rgb),.04)}.svgr__tool-group{display:flex;align-items:center;gap:8px}.svgr__tool-divider{width:1px;height:20px;background:rgba(var(--glass-tint-rgb),.1);margin:0 8px}.svgr__tool-btn{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;background:rgba(var(--glass-tint-rgb),.05);border:1px solid rgba(var(--glass-tint-rgb),.05);color:var(--text-secondary);cursor:pointer;transition:all .2s}.svgr__tool-btn:hover:not(:disabled){background:rgba(var(--glass-tint-rgb),.1);color:var(--text-primary)}.svgr__tool-btn:disabled{opacity:.3;cursor:not-allowed}.svgr__tool-text-btn{padding:6px 12px;border-radius:8px;background:transparent;border:none;color:var(--text-primary);font-size:var(--font-sm);font-weight:600;cursor:pointer;transition:background .2s}.svgr__tool-text-btn:hover{background:rgba(var(--glass-tint-rgb),.05)}.svgr__download-btn{gap:8px;font-size:var(--font-sm);padding:10px 16px}.svgr__section-toggle{display:flex;align-items:center;justify-content:space-between;width:100%;background:none;border:none;cursor:pointer;padding:0;color:inherit}.svgr__section-arrow{display:none;color:var(--text-tertiary);transition:transform var(--transition-base);flex-shrink:0}.svgr__section-arrow--open{transform:rotate(180deg)}.svgr__adjust-body{display:flex;flex-direction:column;gap:8px}@media(max-width:900px){.svgr{flex-direction:column;height:auto;min-height:unset}.svgr__sidebar{width:100%}.svgr__control-card{height:auto;overflow-y:visible}.svgr__main{min-height:350px}.svgr__svg-container{padding:20px}.svgr__section-arrow{display:block}.svgr__adjust-body{max-height:0;overflow:hidden;opacity:0;transition:max-height .3s ease,opacity .2s ease}.svgr__adjust-body--open{max-height:600px;opacity:1}.svgr__toolbar{flex-wrap:wrap;height:auto;padding:var(--space-md);gap:var(--space-sm)}}@media(max-width:480px){.svgr__color-grid{grid-template-columns:repeat(4,1fr)}.svgr__toolbar{flex-direction:column;align-items:stretch}.svgr__tool-group{justify-content:center}.svgr__download-btn{width:100%;justify-content:center}}