.pickr{position:relative;overflow:visible;transform:translateY(0)}.pickr *{box-sizing:border-box;outline:none;border:none;-webkit-appearance:none}.pickr .pcr-button{position:relative;height:2em;width:2em;padding:.5em;cursor:pointer;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;border-radius:.15em;background:url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" stroke="%2342445A" stroke-width="5px" stroke-linecap="round"><path d="M45,45L5,5"></path><path d="M45,5L5,45"></path></svg>') no-repeat center;background-size:0;transition:all .3s}.pickr .pcr-button:before{position:absolute;content:"";top:0;left:0;width:100%;height:100%;background:url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>');background-size:.5em;border-radius:.15em;z-index:-1}.pickr .pcr-button:before{z-index:initial}.pickr .pcr-button:after{position:absolute;content:"";top:0;left:0;height:100%;width:100%;transition:background .3s;background:var(--pcr-color);border-radius:.15em}.pickr .pcr-button.clear{background-size:70%}.pickr .pcr-button.clear:before{opacity:0}.pickr .pcr-button.clear:focus{box-shadow:0 0 0 1px #ffffffd9,0 0 0 3px var(--pcr-color)}.pickr .pcr-button.disabled{cursor:not-allowed}.pickr *,.pcr-app *{box-sizing:border-box;outline:none;border:none;-webkit-appearance:none}.pickr input:focus,.pickr input.pcr-active,.pickr button:focus,.pickr button.pcr-active,.pcr-app input:focus,.pcr-app input.pcr-active,.pcr-app button:focus,.pcr-app button.pcr-active{box-shadow:0 0 0 1px #ffffffd9,0 0 0 3px var(--pcr-color)}.pickr .pcr-palette,.pickr .pcr-slider,.pcr-app .pcr-palette,.pcr-app .pcr-slider{transition:box-shadow .3s}.pickr .pcr-palette:focus,.pickr .pcr-slider:focus,.pcr-app .pcr-palette:focus,.pcr-app .pcr-slider:focus{box-shadow:0 0 0 1px #ffffffd9,0 0 0 3px #00000040}.pcr-app{position:fixed;display:flex;flex-direction:column;z-index:10000;border-radius:.1em;background:#fff;opacity:0;visibility:hidden;transition:opacity .3s,visibility 0s .3s;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;box-shadow:0 .15em 1.5em #0000001a,0 0 1em #00000008;left:0;top:0}.pcr-app.visible{transition:opacity .3s;visibility:visible;opacity:1}.pcr-app .pcr-swatches{display:flex;flex-wrap:wrap;margin-top:.75em}.pcr-app .pcr-swatches.pcr-last{margin:0}@supports (display: grid){.pcr-app .pcr-swatches{display:grid;align-items:center;grid-template-columns:repeat(auto-fit,1.75em)}}.pcr-app .pcr-swatches>button{font-size:1em;position:relative;width:calc(1.75em - 5px);height:calc(1.75em - 5px);border-radius:.15em;cursor:pointer;margin:2.5px;flex-shrink:0;justify-self:center;transition:all .15s;overflow:hidden;background:#0000;z-index:1}.pcr-app .pcr-swatches>button:before{position:absolute;content:"";top:0;left:0;width:100%;height:100%;background:url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>');background-size:6px;border-radius:.15em;z-index:-1}.pcr-app .pcr-swatches>button:after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:var(--pcr-color);border:1px solid rgba(0,0,0,.05);border-radius:.15em;box-sizing:border-box}.pcr-app .pcr-swatches>button:hover{filter:brightness(1.05)}.pcr-app .pcr-swatches>button:not(.pcr-active){box-shadow:none}.pcr-app .pcr-interaction{display:flex;flex-wrap:wrap;align-items:center;margin:0 -.2em}.pcr-app .pcr-interaction>*{margin:0 .2em}.pcr-app .pcr-interaction input{letter-spacing:.07em;font-size:.75em;text-align:center;cursor:pointer;color:#75797e;background:#f1f3f4;border-radius:.15em;transition:all .15s;padding:.45em .5em;margin-top:.75em}.pcr-app .pcr-interaction input:hover{filter:brightness(.975)}.pcr-app .pcr-interaction input:focus{box-shadow:0 0 0 1px #ffffffd9,0 0 0 3px #4285f4bf}.pcr-app .pcr-interaction .pcr-result{color:#75797e;text-align:left;flex:1 1 8em;min-width:8em;transition:all .2s;border-radius:.15em;background:#f1f3f4;cursor:text}.pcr-app .pcr-interaction .pcr-result::-moz-selection{background:#4285f4;color:#fff}.pcr-app .pcr-interaction .pcr-result::selection{background:#4285f4;color:#fff}.pcr-app .pcr-interaction .pcr-type.active{color:#fff;background:#4285f4}.pcr-app .pcr-interaction .pcr-save,.pcr-app .pcr-interaction .pcr-cancel,.pcr-app .pcr-interaction .pcr-clear{color:#fff;width:auto}.pcr-app .pcr-interaction .pcr-save,.pcr-app .pcr-interaction .pcr-cancel,.pcr-app .pcr-interaction .pcr-clear{color:#fff}.pcr-app .pcr-interaction .pcr-save:hover,.pcr-app .pcr-interaction .pcr-cancel:hover,.pcr-app .pcr-interaction .pcr-clear:hover{filter:brightness(.925)}.pcr-app .pcr-interaction .pcr-save{background:#4285f4}.pcr-app .pcr-interaction .pcr-clear,.pcr-app .pcr-interaction .pcr-cancel{background:#f44250}.pcr-app .pcr-interaction .pcr-clear:focus,.pcr-app .pcr-interaction .pcr-cancel:focus{box-shadow:0 0 0 1px #ffffffd9,0 0 0 3px #f44250bf}.pcr-app .pcr-selection .pcr-picker{position:absolute;height:18px;width:18px;border:2px solid #fff;border-radius:100%;-webkit-user-select:none;-moz-user-select:none;user-select:none}.pcr-app .pcr-selection .pcr-color-palette,.pcr-app .pcr-selection .pcr-color-chooser,.pcr-app .pcr-selection .pcr-color-opacity{position:relative;-webkit-user-select:none;-moz-user-select:none;user-select:none;display:flex;flex-direction:column;cursor:grab;cursor:-webkit-grab}.pcr-app .pcr-selection .pcr-color-palette:active,.pcr-app .pcr-selection .pcr-color-chooser:active,.pcr-app .pcr-selection .pcr-color-opacity:active{cursor:grabbing;cursor:-webkit-grabbing}.pcr-app[data-theme=classic]{width:28.5em;max-width:95vw;padding:.8em}.pcr-app[data-theme=classic] .pcr-selection{display:flex;justify-content:space-between;flex-grow:1}.pcr-app[data-theme=classic] .pcr-selection .pcr-color-preview{position:relative;z-index:1;width:2em;display:flex;flex-direction:column;justify-content:space-between;margin-right:.75em}.pcr-app[data-theme=classic] .pcr-selection .pcr-color-preview:before{position:absolute;content:"";top:0;left:0;width:100%;height:100%;background:url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>');background-size:.5em;border-radius:.15em;z-index:-1}.pcr-app[data-theme=classic] .pcr-selection .pcr-color-preview .pcr-last-color{cursor:pointer;border-radius:.15em .15em 0 0;z-index:2}.pcr-app[data-theme=classic] .pcr-selection .pcr-color-preview .pcr-current-color{border-radius:0 0 .15em .15em}.pcr-app[data-theme=classic] .pcr-selection .pcr-color-preview .pcr-last-color,.pcr-app[data-theme=classic] .pcr-selection .pcr-color-preview .pcr-current-color{background:var(--pcr-color);width:100%;height:50%}.pcr-app[data-theme=classic] .pcr-selection .pcr-color-palette{width:100%;height:8em;z-index:1}.pcr-app[data-theme=classic] .pcr-selection .pcr-color-palette .pcr-palette{flex-grow:1;border-radius:.15em}.pcr-app[data-theme=classic] .pcr-selection .pcr-color-palette .pcr-palette:before{position:absolute;content:"";top:0;left:0;width:100%;height:100%;background:url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>');background-size:.5em;border-radius:.15em;z-index:-1}.pcr-app[data-theme=classic] .pcr-selection .pcr-color-chooser,.pcr-app[data-theme=classic] .pcr-selection .pcr-color-opacity{margin-left:.75em}.pcr-app[data-theme=classic] .pcr-selection .pcr-color-chooser .pcr-picker,.pcr-app[data-theme=classic] .pcr-selection .pcr-color-opacity .pcr-picker{left:50%;transform:translate(-50%)}.pcr-app[data-theme=classic] .pcr-selection .pcr-color-chooser .pcr-slider,.pcr-app[data-theme=classic] .pcr-selection .pcr-color-opacity .pcr-slider{width:8px;flex-grow:1;border-radius:50em}.pcr-app[data-theme=classic] .pcr-selection .pcr-color-chooser .pcr-slider{background:linear-gradient(to bottom,red,#ff0,#0f0,#0ff,#00f,#f0f,red)}.pcr-app[data-theme=classic] .pcr-selection .pcr-color-opacity .pcr-slider{background:linear-gradient(to bottom,transparent,black),url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>');background-size:100%,50%}*{margin:0;padding:0;box-sizing:border-box}html,body{max-width:100vw;overflow-x:hidden}:root{--bg-primary: #ffffff;--bg-secondary: #fafafa;--border-color: #e0e0e0;--text-primary: #1a1a1a;--text-secondary: #666666;--accent: #2a2a2a;--accent-hover: #000000;--shadow-light: rgba(0, 0, 0, .1);--shadow-medium: rgba(0, 0, 0, .2)}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;background:var(--bg-secondary);color:var(--text-primary)}.container{max-width:1400px;margin:0 auto;padding:20px;width:100%}header{text-align:center;margin-bottom:30px;position:relative}header h1{font-size:2.5rem;margin-bottom:10px}header p{color:var(--text-secondary);font-size:1.1rem}.header-links{position:fixed;top:10px;right:10px;display:flex;gap:16px;z-index:100}.header-links a,.header-links .icon-button{color:var(--text-primary);text-decoration:none;font-size:1.5rem;transition:color .2s;display:flex;align-items:center;justify-content:center;width:40px;height:40px;background:transparent;border:none;cursor:pointer;padding:0}.header-links a:hover,.header-links .icon-button:hover{color:var(--accent)}.icon-button{position:relative}.icon-button svg{position:absolute;transition:opacity .3s}.sun-icon{opacity:1}.moon-icon,.dark-mode .sun-icon{opacity:0}.dark-mode .moon-icon{opacity:1}.main-content{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start;width:100%}.sidebar{background:var(--bg-secondary);padding:24px;border-radius:8px;box-shadow:0 0 4px var(--shadow-light);height:fit-content;min-width:0;max-width:100%}.control-section{margin-bottom:24px;min-width:0;max-width:100%}.control-section:last-child{margin-bottom:0}.control-section h2{font-size:1.3rem;margin-bottom:16px;color:var(--text-primary);border-bottom:2px solid var(--accent);padding-bottom:8px}.control-row{display:flex;flex-direction:column;gap:12px;margin-bottom:15px}.control-row>.control-group{flex:1;margin-bottom:0}.control-group{margin-bottom:15px;display:flex;align-items:center;gap:12px}.control-group label{display:block;font-weight:500;color:var(--text-primary);min-width:120px;flex-shrink:0}.control-group>input[type=text],.control-group>select,.control-group>.color-input-group,.control-group>.range-wrapper,.control-group>button{flex:1}.range-wrapper{display:flex;align-items:center;flex:1}.range-wrapper input[type=range]{flex:1}.range-wrapper .range-value{min-width:50px;text-align:right}.radio-group{display:flex;flex-direction:row;gap:0;flex-wrap:wrap;flex:1;border-bottom:2px solid var(--border-color);max-width:100%;min-width:0}.radio-group-horizontal{flex-direction:row;gap:0}.radio-group label{display:flex;align-items:center;justify-content:center;margin-bottom:0;font-weight:500;cursor:pointer;padding:10px 20px;border:2px solid transparent;border-bottom:none;border-radius:4px 4px 0 0;transition:all .2s;background:transparent;color:var(--text-secondary);position:relative;bottom:-2px}.radio-group label:hover{background:var(--bg-primary);color:var(--text-primary)}.radio-group input[type=radio]{position:absolute;opacity:0;pointer-events:none}.radio-group input[type=radio]:checked+span{color:var(--text-primary)}.radio-group label:has(input[type=radio]:checked){background:var(--bg-secondary);border-color:var(--border-color);border-bottom-color:var(--bg-secondary);color:var(--text-primary);font-weight:600}.radio-group label{display:inline-flex;align-items:center}input[type=text],input[type=range],textarea{width:100%;padding:8px;border:1px solid var(--border-color);border-radius:4px;font-size:1rem;accent-color:var(--accent)}textarea{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;resize:vertical;min-height:60px}input[type=range]{accent-color:var(--accent);opacity:60%}input[type=checkbox]{width:auto;height:18px;cursor:pointer;accent-color:var(--accent);margin-right:8px}.color-input-group{display:flex;gap:8px;align-items:center}.color-hex-input{flex:1;font-family:Courier New,monospace;text-transform:uppercase}.color-picker-btn{padding:8px 12px;min-width:37px;height:37px;font-size:1.2rem;flex-shrink:0;border:2px solid var(--border-color);cursor:pointer;transition:transform .2s}.color-picker-btn:hover{transform:scale(1.05)}input[type=text]:disabled,input[type=range]:disabled,input[type=checkbox]:disabled,textarea:disabled,button:disabled{opacity:.4;cursor:not-allowed}hex-color-picker[disabled]{opacity:.4;pointer-events:none}button:disabled:hover{background:transparent;color:var(--accent)}input[type=range]{padding:0;accent-color:var(--accent)}#gradient-angle-value{display:inline-block;margin-left:10px;font-weight:700;color:var(--accent)}.range-value{display:inline-block;margin-left:10px;font-weight:700;color:var(--accent);min-width:50px}.select-input{width:100%;padding:8px;border:1px solid var(--border-color);border-radius:4px;font-size:1rem;background:var(--bg-secondary);cursor:pointer}.select-input:disabled{opacity:.5;cursor:not-allowed}.hidden{display:none!important}.outline-button{padding:10px 20px;background:transparent;color:var(--accent);border:2px solid var(--accent);border-radius:4px;cursor:pointer;font-size:1rem;transition:all .2s}.outline-button:hover{background:var(--accent);color:var(--bg-secondary)}#icon-select-btn{width:100%}.icon-select-row{display:flex;gap:16px;align-items:start}.icon-select-left{flex:1;display:flex;flex-direction:column;gap:8px}.icon-select-left button{width:100%}#selected-icon-preview{flex:1;padding:10px;background:var(--bg-primary);border-radius:4px;text-align:center;min-height:60px;display:flex;align-items:center;justify-content:center}#selected-icon-preview svg{width:48px;height:48px}.preview-section{display:flex;flex-direction:column;gap:24px;min-width:0;max-width:100%}.preview-area{background:var(--bg-secondary);padding:24px;border-radius:8px;box-shadow:0 0 4px var(--shadow-light);min-width:0;max-width:100%}.preview-area h2{font-size:1.5rem;margin-bottom:16px;color:var(--text-primary)}.preview-canvases{display:flex;flex-direction:column;gap:16px;align-items:center}.canvas-container-row{display:flex;gap:16px;align-items:center}.canvas-container{display:flex;flex-direction:column;align-items:center;gap:4px;width:100%}.canvas-container canvas,.canvas-container .preview-svg{border:1px solid var(--border-color);border-radius:4px;box-shadow:0 0 4px var(--shadow-light);background:repeating-conic-gradient(#f0f0f0 0% 25%,#fff 0% 50%) 50% / 20px 20px}.preview-svg{display:flex;align-items:center;justify-content:center;overflow:visible;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}.preview-svg svg{display:block}.canvas-container.main .preview-svg{width:100%;max-width:512px;height:auto}#preview-512{width:100%;max-width:512px;height:auto;aspect-ratio:1}#preview-64{width:64px;height:64px}#preview-32{width:32px;height:32px}#preview-24{width:24px;height:24px}#preview-16{width:16px;height:16px}.canvas-container.main canvas{width:100%;max-width:512px;height:auto}.canvas-label{font-size:.9rem;color:var(--text-secondary);font-weight:500}.download-panel{background:var(--bg-secondary);padding:24px;border-radius:8px;box-shadow:0 0 4px var(--shadow-light);min-width:0;max-width:100%}.download-panel h2{font-size:1.5rem;margin-bottom:16px;color:var(--text-primary)}.download-buttons h3{font-size:1.1rem;margin:15px 0 10px;color:var(--text-secondary)}.button-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(90px,1fr));gap:12px;margin-bottom:20px}.download-btn{padding:8px 12px;font-weight:500}.modal{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000}.modal-content{background:var(--bg-secondary);border-radius:8px;max-width:800px;width:90%;max-height:90vh;display:flex;flex-direction:column;box-shadow:0 0 12px var(--shadow-medium)}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:20px;border-bottom:1px solid var(--border-color)}.modal-header h2{margin:0}.close-btn{background:none;color:var(--text-primary);font-size:2rem;padding:0;width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:50%}.close-btn:hover{background:var(--bg-primary)}.modal-body{padding:20px;overflow-y:auto}#icon-search,#emoji-search{width:100%;margin-bottom:20px;font-size:1.1rem}.picker-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(4rem,1fr));gap:8px;max-height:500px;overflow-y:auto}.picker-item{display:flex;align-items:center;justify-content:center;border:1px solid var(--border-color);border-radius:4px;cursor:pointer;transition:all .2s;background:var(--bg-secondary);padding:.75rem;width:4rem;height:4rem}.picker-item:hover{background:var(--bg-primary);border-color:var(--accent);transform:translateY(-2px)}.picker-item svg{width:2rem;height:2rem}.picker-item.emoji{font-size:2rem}.icon-placeholder{width:2rem;height:2rem;background:var(--bg-primary);border-radius:4px;animation:pulse 1.5s ease-in-out infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}@media(max-width:968px){.main-content{grid-template-columns:1fr}.canvas-container.main canvas{width:100%;max-width:512px;height:auto}header{text-align:left}header h1{font-size:1.5rem}}@media(max-width:600px){header h1{margin-top:50px}.preview-canvases{flex-direction:column;align-items:center}.button-grid{grid-template-columns:repeat(2,1fr)}.container{padding:10px}.sidebar,.preview-area,.download-panel{padding:12px}.control-group{flex-direction:column;align-items:stretch}.control-group label{min-width:auto;margin-bottom:4px}@supports not (aspect-ratio: 1){#preview-512{height:100vw;max-height:100%}}.canvas-container.main .preview-svg{width:100%;max-width:100%}.radio-group{gap:4px}.radio-group label{flex:0 1 auto;padding:6px 8px;font-size:.8rem}input[type=text],textarea,.select-input,.color-hex-input,.color-input-group{max-width:100%;box-sizing:border-box}.control-section{max-width:100%}.control-section h2{font-size:1.1rem}}.pickr{position:relative}.pickr .pcr-button{border:2px solid var(--border-color);border-radius:4px;width:37px;height:37px;padding:0;cursor:pointer;transition:transform .2s}.pickr .pcr-button:hover{transform:scale(1.05)}.pcr-app{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:8px;box-shadow:0 0 12px var(--shadow-medium)}.pcr-app .pcr-interaction input,.pcr-app .pcr-interaction .pcr-result{background:var(--bg-primary);color:var(--text-primary);border:1px solid var(--border-color)}.pcr-app .pcr-interaction .pcr-save{background:var(--accent);color:var(--bg-secondary)}.pcr-app .pcr-interaction .pcr-save:hover{background:var(--accent-hover)}.pcr-app .pcr-swatches button{border-radius:4px;transition:transform .2s}.pcr-app .pcr-swatches button:hover{transform:scale(1.1)}body.dark-mode{--bg-primary: #080808;--bg-secondary: #111111;--border-color: #333333;--text-primary: #aaaaaa;--text-secondary: #999999;--accent: #666666;--accent-hover: #777777;--shadow-light: rgba(255, 255, 255, .2);--shadow-medium: rgba(255, 255, 255, .3)}body.dark-mode .canvas-container canvas,body.dark-mode .canvas-container .preview-svg{background:repeating-conic-gradient(#0a0a0a 0% 25%,#1a1a1a 0% 50%) 50% / 20px 20px}body.dark-mode #color-picker-modal .color-picker-popup{background:var(--bg-secondary)}body.dark-mode input[type=text],body.dark-mode textarea,body.dark-mode .select-input{background:var(--bg-primary);color:var(--text-primary)}