@font-face{font-family:SF Pro Text;src:url(../fonts/sf-pro-text-medium.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:SF Pro Text;src:url(../fonts/sf-pro-text-medium.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}@font-face{font-family:SF Pro Text;src:url(../fonts/sf-pro-text-bold.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}@font-face{font-family:SF Pro Text;src:url(../fonts/sf-pro-text-bold.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}:root{--primary-color: #3b82f6;--primary-hover: #2563eb;--accent-color: #8b5cf6;--bg-main: #f3f4f6;--bg-glass: rgba(255, 255, 255, .75);--bg-glass-border: rgba(255, 255, 255, .5);--text-main: #1f2937;--text-sub: #6b7280;--border-light: rgba(0, 0, 0, .05);--shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px 0 rgba(0, 0, 0, .06);--shadow-glass: 0 10px 30px -5px rgba(0, 0, 0, .1);--glass-blur: blur(12px);--rainbow-gradient: linear-gradient(to right, hsl(0, 100%, 50%), hsl(60, 100%, 50%), hsl(120, 100%, 50%), hsl(180, 100%, 50%), hsl(240, 100%, 50%), hsl(300, 100%, 50%), hsl(360, 100%, 50%))}*{-webkit-tap-highlight-color:transparent;box-sizing:border-box}body{font-family:SF Pro Text,Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;margin:0;background:linear-gradient(135deg,#f5f7fa,#c3cfe2);display:flex;height:100vh;overflow:hidden;color:var(--text-main)}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:#00000005;border-radius:6px;margin:20px 0}::-webkit-scrollbar-thumb{background:#00000026;border-radius:6px;border:2px solid transparent;background-clip:content-box;transition:background .2s ease}::-webkit-scrollbar-thumb:hover{background:#0000004d;border:2px solid transparent;background-clip:content-box}::-webkit-scrollbar-corner{background:transparent}h2{color:var(--text-main);border-bottom:1px solid var(--border-light);padding-bottom:10px;font-size:1.5rem;font-family:SF Pro Text,sans-serif;letter-spacing:-.02em}p{font-size:.95rem;line-height:1.6;color:var(--text-sub);margin-top:.1rem;margin-bottom:1rem}#player-panel,#editor-panel{background:var(--bg-glass);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border:1px solid var(--bg-glass-border);box-shadow:var(--shadow-glass);border-radius:24px;margin:20px;padding:15px 30px;display:flex;flex-direction:column;overflow-y:auto;transition:all .3s ease}#player-panel{width:40%;max-width:500px;min-width:380px;align-items:center;margin-right:10px}#editor-panel{flex:1;margin-left:10px}#anim{width:100%;aspect-ratio:1 / 1;max-width:400px;margin:10px 0;border-radius:16px;border:1px solid rgba(0,0,0,.05);background:#fff;background-image:linear-gradient(45deg,#f0f0f0 25%,transparent 25%),linear-gradient(-45deg,#f0f0f0 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#f0f0f0 75%),linear-gradient(-45deg,transparent 75%,#f0f0f0 75%);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0px;box-shadow:inset 0 2px 4px #0000000d;overflow:hidden;display:flex;align-items:center;justify-content:center}#controls{width:100%;max-width:400px;display:flex;flex-direction:column;gap:15px;margin-top:10px;padding:20px;background:#fff;border-radius:16px;box-shadow:var(--shadow-sm)}.player-actions{display:flex;justify-content:center;gap:12px}.player-actions .action-btn{flex:0 1 auto!important;min-width:110px;padding:10px 18px;border-radius:50px;display:flex;align-items:center;justify-content:center;gap:8px;font-weight:600;font-size:.9rem}.player-actions .action-btn svg{flex-shrink:0}input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;margin-top:10px;background:transparent}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;height:16px;width:16px;border-radius:50%;background:var(--primary-color);cursor:pointer;margin-top:-6px;box-shadow:0 2px 4px #0003}input[type=range]::-webkit-slider-runnable-track{width:100%;height:4px;cursor:pointer;background:#e5e7eb;border-radius:2px}#frameLabel{font-size:.85rem;color:var(--text-sub);font-weight:600;text-align:center;display:flex;align-items:center;justify-content:center;gap:8px;margin-top:5px}#frameInput{width:60px;padding:5px 8px;border:1px solid #d1d5db;border-radius:8px;text-align:center;font-size:.85rem;font-family:SF Pro Text,sans-serif;color:var(--text-main);font-weight:600}#frameInput:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 3px #3b82f61a}.action-btn,.filter-btn{padding:12px 20px;border:none;border-radius:12px;cursor:pointer;font-size:.9rem;font-weight:600;font-family:SF Pro Text,sans-serif;transition:all .2s cubic-bezier(.4,0,.2,1);display:inline-flex;align-items:center;justify-content:center}.action-btn:active,.filter-btn:active{transform:scale(.96)}.action-btn{flex:1;color:#fff;box-shadow:0 4px 6px #3b82f640}#playPauseBtn{background:var(--primary-color)}#playPauseBtn:hover{background:var(--primary-hover);transform:translateY(-1px);box-shadow:0 6px 12px #3b82f64d}#exportBtn{background:#10b981;box-shadow:0 4px 6px #10b98140}#exportBtn:not(:disabled):hover{background:#059669;transform:translateY(-1px);box-shadow:0 6px 12px #10b9814d}.action-btn:disabled{background:#d1d5db!important;color:#9ca3af!important;cursor:not-allowed;box-shadow:none!important;transform:none!important}.filter-btn{background:#fff;color:var(--text-sub);border:1px solid #e5e7eb;box-shadow:0 1px 2px #0000000d}.filter-btn:hover{background:#f9fafb;border-color:#d1d5db}.filter-btn.active{background:var(--primary-color);color:#fff;border-color:var(--primary-color);box-shadow:0 4px 10px #3b82f64d}.file-input-section{margin-bottom:30px}.drop-zone{width:100%;height:160px;border:2px dashed #cbd5e1;border-radius:16px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease;background:#ffffff80}.drop-zone:hover,.drop-zone.drag-over{border-color:var(--primary-color);background:#3b82f60d}.drop-zone-content{text-align:center;pointer-events:none}.upload-icon{color:var(--text-sub);margin-bottom:10px;transition:color .2s}.drop-zone:hover .upload-icon{color:var(--primary-color)}.drop-text{font-size:1rem;font-weight:600;color:var(--text-main);margin:0}.drop-subtext{font-size:.85rem;color:var(--text-sub);margin:5px 0 0}.file-name-display{margin-top:10px;font-size:.9rem;color:var(--primary-color);font-weight:600;text-align:center;min-height:1.2em}#editor-controls{background:#fff;padding:20px;border-radius:16px;box-shadow:var(--shadow-sm);margin-bottom:25px}.controls-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px}.controls-header p{margin:0}.danger-btn{background:#ef4444;box-shadow:0 4px 6px #ef444440;padding:10px 12px;margin-left:5px;font-size:.8rem;flex:initial}.danger-btn:not(:disabled):hover{background:#dc2626;box-shadow:0 6px 12px #ef44444d}.danger-zone{margin-top:auto;padding-top:20px}.danger-zone .divider{height:1px;background:var(--border-light);margin-bottom:25px;width:100%}.danger-zone-content{display:flex;justify-content:space-between;align-items:center;background:#ef444408;padding:20px;border-radius:16px;border:1px solid rgba(239,68,68,.1)}.danger-zone-text h4{margin:0;color:#ef4444;font-size:.95rem;font-weight:700}.danger-zone-text p{margin:5px 0 0;font-size:.85rem;color:var(--text-sub)}.ghost-btn{background:transparent!important;color:#ef4444!important;border:1px solid rgba(239,68,68,.2)!important;box-shadow:none!important;padding:10px 16px;white-space:nowrap}.ghost-btn:hover{background:#ef444414!important;border-color:#ef4444!important}#filter-buttons{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:15px}#dedupe-group{display:flex;align-items:center;gap:10px;font-size:.9rem;color:var(--text-sub)}#hsl-controls-section{background:#fff;padding:20px;border-radius:16px;box-shadow:var(--shadow-sm);margin-bottom:25px}.hsl-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.hsl-header p{margin:0;font-size:.95rem;color:var(--text-sub);font-weight:700}.hsl-options{margin-bottom:20px;display:flex;align-items:center;gap:8px}.hsl-options label{font-weight:400;color:var(--text-sub);font-size:.9rem;cursor:pointer}.hsl-slider-row{display:flex;align-items:center;gap:15px;margin-bottom:15px}.hsl-slider-row:last-child{margin-bottom:0}.hsl-slider-row label{min-width:80px;font-size:1rem;font-weight:400;color:var(--text-main)}.hsl-slider{flex:1;-webkit-appearance:none;-moz-appearance:none;appearance:none;height:8px;border-radius:4px;outline:none;cursor:pointer}.hue-slider{background:var(--rainbow-gradient)}.saturation-slider{background:linear-gradient(to right,gray,#0af)}.lightness-slider{background:linear-gradient(to right,#0d1e26,#4095bf,#d9eaf2)}.hsl-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:#fff;border:3px solid var(--primary-color);cursor:pointer;box-shadow:0 2px 6px #0003;transition:transform .15s ease,box-shadow .15s ease}.hsl-slider::-webkit-slider-thumb:hover{transform:scale(1.1);box-shadow:0 3px 10px #00000040}.hsl-slider::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#fff;border:3px solid var(--primary-color);cursor:pointer;box-shadow:0 2px 6px #0003}.hsl-slider:disabled{opacity:.5;cursor:not-allowed}.hsl-slider:disabled::-webkit-slider-thumb{cursor:not-allowed}.hsl-input{width:60px;padding:6px 8px;border:1px solid #d1d5db;border-radius:8px;text-align:center;font-size:.85rem;font-weight:600;font-family:SF Pro Text,sans-serif;color:var(--text-main);background:#f9fafb;transition:all .2s ease}.hsl-input:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 3px #3b82f61a;background:#fff}.hsl-input:disabled{opacity:.5;cursor:not-allowed;background:#f3f4f6}.hsl-input::-webkit-outer-spin-button,.hsl-input::-webkit-inner-spin-button{-webkit-appearance:none;appearance:none;margin:0}.hsl-input[type=number]{-moz-appearance:textfield;appearance:textfield}.hsl-unit{font-size:.85rem;font-weight:600;color:var(--text-sub);min-width:15px}.secondary-btn{background:#6b7280;box-shadow:0 4px 6px #6b728040;padding:10px 14px;font-size:.8rem;flex:initial}.secondary-btn:not(:disabled):hover{background:#4b5563;box-shadow:0 6px 12px #6b72804d;transform:translateY(-1px)}.colors-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:20px;padding-bottom:20px}.colors-flex{display:flex;flex-wrap:wrap;gap:20px;padding-bottom:20px}.color-card{background:#fff;border-radius:16px;padding:15px;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;align-items:center;border:1px solid transparent;position:relative}.color-card.locked{border-color:#f59e0b;box-shadow:0 8px 25px #f59e0b33,inset 0 1px #fffc;position:relative;overflow:visible;z-index:1}.color-card:after{content:"";position:absolute;inset:0;border-radius:16px;background:linear-gradient(135deg,#fffaf0,#fffbeb,#fef3c7);opacity:0;transition:opacity .4s ease;z-index:0;pointer-events:none}.color-card.locked:after{opacity:1}.color-card>*{position:relative;z-index:2}.color-card .lock-btn{z-index:10}.color-card.locked:before{content:"";position:absolute;inset:-2px;border-radius:16px;background:linear-gradient(45deg,#fffaf0,#fffbeb,#fef3c7);background-size:200% 200%;animation:shimmer 3s ease-in-out infinite;opacity:.2;z-index:-1;pointer-events:none;mix-blend-mode:normal}@keyframes shimmer{0%,to{background-position:0% 50%}50%{background-position:100% 50%}}.color-card.locked:hover{border-color:#fbbf24;box-shadow:0 12px 30px #f59e0b4d,inset 0 2px #ffffffe6;transform:translateY(-4px) scale(1.02);background:linear-gradient(135deg,#fffaf0,#fffbeb,#fef3c7);z-index:1}.color-card.locked:hover:before{opacity:.15;z-index:-1}.gradient-stop.locked{border-color:#f59e0b;background:linear-gradient(135deg,#fffaf0,#fffbeb,#fef3c7);box-shadow:0 6px 18px #f59e0b33,inset 0 1px #fffc;position:relative;overflow:visible;z-index:1}.gradient-stop.locked:before{content:"";position:absolute;inset:-1px;border-radius:12px;background:linear-gradient(45deg,#fffaf0,#fffbeb,#fef3c7);background-size:200% 200%;animation:shimmer 3s ease-in-out infinite;opacity:.2;z-index:-1;pointer-events:none;mix-blend-mode:normal}.gradient-stop.locked:hover{border-color:#fbbf24;box-shadow:0 8px 22px #f59e0b40,inset 0 2px #ffffffe6;transform:translateY(-2px) scale(1.02);background:linear-gradient(135deg,#fffaf0,#fffbeb,#fef3c7);z-index:1}.gradient-stop.locked:hover:before{opacity:.15;z-index:-1}.lock-btn{position:absolute;top:8px;right:8px;width:28px;height:28px;border-radius:8px;background:transparent;border:none;color:#9ca3af;cursor:pointer;z-index:10;display:flex;align-items:center;justify-content:center;transition:all .2s cubic-bezier(.4,0,.2,1);opacity:0;transform:scale(.9)}.color-card:hover .lock-btn,.gradient-stop:hover .lock-btn,.lock-btn.locked{opacity:1;transform:scale(1)}.lock-btn:hover{background:#0000000d;color:#4b5563}.lock-btn:active{transform:scale(.9)!important}.lock-btn.locked{background:#f59e0b;color:#fff;box-shadow:0 2px 6px #f59e0b4d}.lock-btn.locked:hover{background:#d97706;box-shadow:0 4px 10px #f59e0b66;transform:scale(1.05)}.lock-btn svg{display:block;stroke-width:2.5}.lock-btn.locked svg{stroke-width:2.5}.lock-btn .lock-shackle,.lock-btn .lock-body{transition:all .2s ease}.lock-btn.locked svg{filter:drop-shadow(0 2px 2px rgba(0,0,0,.2))}.lock-btn.gradient-lock{width:22px;height:22px;top:-4px;right:-4px;background:linear-gradient(135deg,#fff,#f9fafb);border-color:#e5e7eb}.lock-btn.gradient-lock:hover{transform:scale(1.1);background:linear-gradient(135deg,#f3f4f6,#e5e7eb)}.lock-btn.gradient-lock.locked{background:linear-gradient(135deg,#fee2e2,#fecaca,#f87171);border-color:#f87171;color:#f87171;box-shadow:0 4px 12px #ef444433,inset 0 2px #fffc,inset 0 -2px #0000001a}.lock-btn.gradient-lock.locked:hover{background:linear-gradient(135deg,#fff1f2,#fecaca,#f87171);transform:scale(1.05) translateY(-1px);box-shadow:0 6px 16px #ef444440,inset 0 3px #ffffffe6,inset 0 -3px #00000026}.lock-btn.gradient-lock.locked:before{border-color:#ef44444d}.lock-btn.gradient-lock svg{width:10px;height:10px}.lock-shackle{transform:rotate(20deg);transform-origin:17px 11px;transition:transform .5s cubic-bezier(.2,.8,.2,1);fill:none}.lock-body{transition:fill .3s ease}.lock-btn.locked .lock-shackle{transform:rotate(0)}.lock-btn.locked .lock-body{fill:currentColor}.lock-btn:after{content:"";position:absolute;top:50%;left:50%;width:28px;height:28px;border-radius:50%;background:#f59e0b66;transform:translate(-50%,-50%) scale(0);opacity:0;pointer-events:none;z-index:-1}.lock-btn:active:after{animation:ripple-gold .4s ease-out}@keyframes ripple-gold{0%{transform:translate(-50%,-50%) scale(.5);opacity:.8}to{transform:translate(-50%,-50%) scale(2.5);opacity:0}}.color-card:hover{transform:translateY(-4px);box-shadow:0 10px 25px #00000014;border-color:var(--primary-color)}.color-card label{margin-top:12px;font-size:.75rem;color:var(--text-sub);text-transform:capitalize;letter-spacing:.03em;font-weight:700;text-align:center}.color-card .color-picker-component{width:50px;height:50px}.color-card .color-picker-trigger{transition:all .2s ease}.color-card .color-picker-trigger:hover{transform:scale(1.1);box-shadow:0 4px 12px #00000026}.initial-message{width:100%;text-align:center;color:var(--text-sub);padding:40px;background:#ffffff80;border-radius:16px;border:2px dashed #e5e7eb}.modal-overlay{position:fixed;inset:0;background:#0006;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;justify-content:center;align-items:center;z-index:1000;opacity:0;visibility:hidden;transition:all .3s ease}.modal-overlay.show{opacity:1;visibility:visible}.modal-content{background:#fffffff2;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);padding:20px 30px 30px;border-radius:24px;box-shadow:0 20px 50px #0003,0 0 0 1px #ffffff80 inset;width:90%;max-width:420px;text-align:center;transform:scale(.95) translateY(10px);transition:all .3s cubic-bezier(.34,1.56,.64,1);border:1px solid rgba(255,255,255,.2)}.modal-overlay.show .modal-content{transform:scale(1) translateY(0)}.modal-close{position:absolute;top:20px;right:20px;width:32px;height:32px;border-radius:50%;background:#0000000d;display:flex;align-items:center;justify-content:center;color:var(--text-sub);cursor:pointer;transition:all .2s ease}.modal-close:hover{background:#0000001a;color:var(--text-main);transform:rotate(90deg)}.modal-content h3{margin-top:10px;margin-bottom:10px;font-size:1.5rem;color:var(--text-main)}.modal-description{margin-bottom:25px;color:var(--text-sub);font-size:.9rem}.modal-buttons{display:flex;flex-direction:row;gap:12px;margin-top:20px;justify-content:center}.modal-buttons .action-btn{flex:1!important;padding:14px 20px;min-height:48px;font-size:1rem;width:auto!important;margin:0!important}@media(max-width:480px){.modal-buttons{flex-direction:column-reverse}}.modal-btn{width:100%;padding:14px;font-size:1rem;justify-content:center;background:var(--primary-color);color:#fff}.modal-btn:hover{background:var(--primary-hover);transform:translateY(-2px)}@media(max-width:900px){body{flex-direction:column;overflow-y:auto;height:auto}#player-panel,#editor-panel{width:auto;margin:15px;max-width:none;min-width:0}#player-panel{margin-bottom:0}.hsl-slider-row{flex-wrap:wrap}.hsl-slider-row label{flex:1}.hsl-slider{width:100%;flex:none;order:4;height:14px;margin-top:10px}.hsl-slider::-webkit-slider-thumb{width:28px;height:28px}.hsl-slider::-moz-range-thumb{width:28px;height:28px}}.gradient-card{flex:1 0 auto;width:fit-content;max-width:100%;flex-direction:column;justify-content:center;align-items:center;gap:15px;flex-wrap:wrap}.gradient-stops{display:flex;gap:10px;flex-wrap:wrap;width:100%;justify-content:center;align-items:center}.gradient-stop{display:flex;flex-direction:column;align-items:center;gap:8px;background:#f9fafb;padding:8px;border-radius:12px;border:1px solid #e5e7eb;position:relative;transition:all .2s ease}.gradient-stop:hover{border-color:#d1d5db;box-shadow:0 2px 5px #0000000d}.gradient-stop.locked{border-color:#f59e0b;box-shadow:0 2px 8px #f59e0b26}.gradient-stop:after{content:"";position:absolute;inset:0;border-radius:12px;background:linear-gradient(to bottom right,#fffaf0,#fffbeb);opacity:0;transition:opacity .4s ease;z-index:0;pointer-events:none}.gradient-stop.locked:after{opacity:1}.gradient-stop>*{position:relative;z-index:2}.gradient-stop .lock-btn{z-index:10}.gradient-stop.locked:hover{border-color:#fbbf24;box-shadow:0 4px 12px #f59e0b40;transform:translateY(-1px)}.gradient-stop input[type=number]{width:70px;padding:5px;border:1px solid #d1d5db;border-radius:8px;text-align:center;font-size:.85rem;font-family:SF Pro Text,sans-serif;color:var(--text-main)}.gradient-stop input[type=number]:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 3px #3b82f61a}.gradient-info{display:flex;flex-direction:column;align-items:center;width:100%;margin-bottom:5px}.gradient-info label{margin:0;text-align:center}.modal-divider{height:1px;background:#0000001a;margin:25px 0;width:100%}.frame-input{width:80px;padding:12px;border:1px solid rgba(0,0,0,.1);border-radius:12px;text-align:center;font-size:1rem;font-family:inherit;color:var(--text-main);background:#fff;transition:all .2s ease}.frame-input:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 3px #3b82f61a}.inline-input{width:60px;padding:6px 3px;margin:0 5px;display:inline-block;vertical-align:middle;font-size:.9rem;border-radius:6px}.color-picker-component{position:relative;display:inline-block;font-family:SF Pro Text,sans-serif}.color-picker-trigger{display:flex;align-items:center;gap:10px;padding:12px 20px;border:1px solid var(--border-light);border-radius:12px;background:var(--bg-glass);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);cursor:pointer;transition:all .2s ease;font-size:.9rem;color:var(--text-main);font-weight:600;box-shadow:var(--shadow-sm)}.color-picker-trigger:hover{border-color:var(--primary-color);box-shadow:0 4px 12px #3b82f626;transform:translateY(-1px)}.color-picker-trigger:active{transform:translateY(0);box-shadow:var(--shadow-sm)}.color-preview{width:24px;height:24px;border-radius:6px;border:2px solid var(--bg-glass);box-shadow:0 0 0 1px #0000001a,inset 0 0 0 1px #0000001a}.color-value{font-family:SF Pro Text,sans-serif;font-size:.85rem;font-weight:600;color:var(--text-main)}.color-picker-popup{position:fixed;width:275px;background:var(--bg-glass);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-radius:24px;box-shadow:var(--shadow-glass);z-index:10000;overflow:hidden;animation:popupFadeIn .2s ease;border:1px solid var(--bg-glass-border)}@keyframes popupFadeIn{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.picker-header{display:flex;align-items:center;justify-content:space-between;padding:15px 20px;background:transparent;border-bottom:1px solid var(--border-light)}.picker-tabs{display:flex;gap:4px;background:#00000008;border-radius:8px;padding:3px}.picker-tab{padding:6px 12px;border:none;background:transparent;border-radius:6px;font-size:.75rem;font-weight:600;color:var(--text-sub);cursor:pointer;transition:all .2s ease;font-family:SF Pro Text,sans-serif;letter-spacing:.02em}.picker-tab:hover{color:var(--text-main);background:#ffffff80}.picker-tab.active{background:var(--primary-color);color:#fff;box-shadow:var(--shadow-sm)}.eyedropper-btn{padding:8px;border:1px solid var(--border-light);background:var(--bg-glass);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border-radius:8px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease;color:var(--text-sub);box-shadow:var(--shadow-sm)}.eyedropper-btn:hover{background:#3b82f60d;border-color:var(--primary-color);color:var(--text-main);transform:translateY(-1px);box-shadow:0 4px 8px #3b82f61a}.picker-body{padding:20px}.color-area-container{margin-bottom:20px}.color-area{position:relative;width:100%;height:160px;border-radius:6px;background:red;cursor:crosshair;overflow:hidden;box-shadow:inset 0 0 0 1px #0000001a}.color-area-overlay{position:absolute;inset:0;pointer-events:none}.white-overlay{background:linear-gradient(to right,#fff,#fff0)}.black-overlay{background:linear-gradient(to bottom,transparent 0%,#000 100%)}.color-area-cursor{position:absolute;width:15px;height:15px;border:2px solid white;border-radius:50%;box-shadow:0 0 0 1px #0000004d,0 2px 4px #0003;transform:translate(-50%,-50%);pointer-events:none;transition:transform .1s ease;will-change:transform,left,top}.color-area:active .color-area-cursor{transform:translate(-50%,-50%) scale(1.2)}.sliders-container{display:flex;flex-direction:column;gap:16px;margin-bottom:20px}.slider-wrapper{position:relative}.slider{position:relative;height:14px;border-radius:5px;cursor:pointer;overflow:hidden}.slider-track{position:absolute;inset:0;border-radius:5px;box-shadow:inset 0 0 0 1px #0000001a}.hue-track{background:var(--rainbow-gradient)}.slider-thumb{position:absolute;top:50%;width:12px;height:12px;border:2px solid var(--bg-main);border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 0 2px 1px #0000001a;pointer-events:none;transition:transform .1s ease;background:transparent}.slider:active .slider-thumb{transform:translate(-50%,-50%) scale(1.15)}.color-inputs-wrapper{display:flex;align-items:flex-start;gap:12px}.inputs-container{flex:1;display:flex;gap:8px}.input-group{flex:1;display:flex;flex-direction:column;gap:6px}.color-input{width:100%;padding:8px 12px;border:1px solid var(--border-light);border-radius:8px;font-family:SF Pro Text,sans-serif;font-size:.85rem;font-weight:400;color:var(--text-main);background:#fff;text-align:center;transition:all .2s ease;box-shadow:var(--shadow-sm)}.color-input:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 3px #3b82f61a;background:#fff}.input-label{font-size:.75rem;color:var(--text-sub);text-align:center;font-weight:600;text-transform:uppercase;font-family:SF Pro Text,sans-serif;letter-spacing:.05em}.copy-btn{padding:10px;border:1px solid var(--border-light);background:var(--bg-glass);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border-radius:8px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease;color:var(--text-sub);box-shadow:var(--shadow-sm)}.copy-btn:hover{background:#3b82f60d;border-color:var(--primary-color);color:var(--text-main);transform:translateY(-1px);box-shadow:0 4px 8px #3b82f61a}.copy-btn svg{width:13px;height:13px;stroke:currentColor}@media(max-width:340px){.color-picker-popup{width:calc(100vw - 32px)}}