/*!
 * Hey Color 2.0.0
 * Uma ferramenta da HeyForge para o Adobe After Effects.
 * Desenvolvido por Neto Salazar.
 * HeyForge - ferramentas feitas por quem vive de movimento, para quem vive de movimento.
 * (c) 2026 HeyForge. Todos os direitos reservados.
 */
html,body{height:100%;background:var(--library-bg,#232323)}
body{overflow:hidden}
body>.panel{height:50px;background:var(--library-bg,#232323);padding:10px 14px}
.simulator{height:calc(100vh - 40px);min-height:0;position:relative;display:flex;flex-direction:column;background:var(--library-bg,#232323);color:var(--text);font-family:"Segoe UI",Arial,sans-serif;overflow:hidden}
.library-toolbar{display:flex;align-items:center;gap:8px;padding:12px 16px;background:var(--library-bg,#232323);flex:none;min-height:59px}
.collection-select-wrap{width:130px;flex:none;position:relative}
#collection,.search-wrap,.tool-square{height:32px;background:#1e1e1e;border:1px solid #2a2a2a;border-radius:8px;color:#ccc}
#collection{width:100%;padding:0 25px 0 12px;font-size:12px;font-weight:500;appearance:none;outline:none;cursor:pointer}
#collection:hover,.search-wrap:hover,.tool-square:hover{background:#252525}
.chevron-small{position:absolute;right:11px;top:12px;border:solid #777;border-width:0 1.5px 1.5px 0;padding:3px;transform:rotate(45deg);pointer-events:none}
.search-wrap{display:flex;align-items:center;flex:1;min-width:0;padding:0 8px;gap:5px}
.search-wrap svg{width:14px;height:14px;flex:none;stroke:#777;stroke-width:2;fill:none}
#search{width:100%;min-width:0;border:0;outline:0;background:transparent;color:#ddd;font-size:12px;user-select:text}
#search::placeholder{color:#666}
#search::-webkit-search-cancel-button{cursor:pointer}
.tool-square{width:32px;min-width:32px;display:flex;align-items:center;justify-content:center;color:#888}
.tool-square svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tool-square svg.icon-solid{fill:currentColor;stroke:none}
body:not(.is-narrow) .panel,body:not(.is-narrow) .library-toolbar,body:not(.is-narrow) .filter-pill,body:not(.is-narrow) .palette-list{width:100%;max-width:var(--compact-max,264px);margin-right:auto}
.tool-square:hover{color:#dedee0}
.tool-square.is-active{background:#2c2c2e;border-color:#444;color:var(--accent)}
.filter-pill{margin:0 16px 4px;color:#aaa;font-size:11px}
.filter-pill button{display:inline-flex;align-items:center;gap:5px;margin-left:7px;padding:4px 7px;border:1px solid #333;border-radius:14px;background:#202020;color:#ddd;font-size:11px}
.filter-pill i{width:8px;height:8px;border-radius:50%;display:inline-block}
.palette-list{overflow-y:auto;min-height:0;flex:1;padding:18px 16px 16px;display:flex;flex-direction:column;gap:18px}
body:not(.is-narrow) .palette-list{scrollbar-width:auto;-ms-overflow-style:auto}
body:not(.is-narrow) .palette-list::-webkit-scrollbar{display:block;width:10px;height:10px}
body:not(.is-narrow) .palette-list::-webkit-scrollbar-track{background:transparent}
body:not(.is-narrow) .palette-list::-webkit-scrollbar-thumb{min-height:40px;border:2px solid var(--bg);border-radius:10px;background:#626269;background-clip:padding-box}
body:not(.is-narrow) .palette-list::-webkit-scrollbar-thumb:hover,body:not(.is-narrow) .palette-list::-webkit-scrollbar-thumb:active{background:var(--accent);background-clip:padding-box}
.palette-card{position:relative;display:flex;flex-direction:column;flex:none}
.palette-name{color:#999;font-size:11px;font-weight:600;letter-spacing:.1px}
.palette-strip{display:flex;width:100%;height:34px;border:1px solid #222;border-radius:7px;overflow:hidden}
.shade{height:100%;flex:1;min-width:0;position:relative;cursor:pointer;border:0;border-radius:0;transition:flex-grow .2s ease}
.shade:not(.empty):hover{flex-grow:2.4}
.shade:focus-visible{outline:2px solid white;outline-offset:-3px;z-index:1}
.shade.empty:before,.shade.empty:after{content:'';position:absolute;left:50%;top:50%;background:var(--text-dim);border-radius:1.5px;transform:translate(-50%,-50%)}
.shade.empty:before{width:13px;height:3px}
.shade.empty:after{width:3px;height:13px}
.shade.empty:hover:before,.shade.empty:hover:after{background:var(--text)}
.empty-results{text-align:center;margin:48px auto;color:#777;font-size:12px}.empty-results button{display:block;margin:10px auto;color:#ad8cff;text-decoration:underline}
.sim-toast{position:fixed;bottom:96px;left:50%;transform:translateX(-50%);max-width:calc(100vw - 16px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-radius:20px;border:1px solid #3a3a3c;background:#2c2c2ef2;color:#fff;box-shadow:0 7px 20px #0008;padding:8px 12px;font-size:11px;z-index:100;pointer-events:none}
.sim-modal{position:fixed;inset:0;background:#000a;backdrop-filter:blur(3px);z-index:70;display:flex;align-items:center;justify-content:center;padding:12px}
.sim-dialog{width:70%;max-width:196px;max-height:calc(100vh - 24px);overflow:auto;border-radius:12px;background:#1c1c1e;border:1px solid #2c2c2e;box-shadow:0 14px 36px #000b;color:#eee}
.sim-dialog-head{display:flex;align-items:center;justify-content:space-between;padding:5px 10px;border-bottom:1px solid #2c2c2e;background:#222224}
.sim-dialog h2{font-size:13px;font-weight:600;margin:0}.close-button{font-size:20px;color:#888;line-height:1}.close-button:hover{color:#fff}
#modal-body{padding:9px;display:flex;flex-direction:column;gap:7px;font-size:12px}
.sim-input,.sim-textarea{width:100%;background:#121212;border:1px solid #2c2c2e;color:#eee;border-radius:6px;padding:8px;font-size:12px;outline:none;user-select:text}
.simulator input:focus-visible,.sim-modal input:focus-visible{outline:none}
.sim-input:focus,.sim-textarea:focus{border-color:#3b6bff}.sim-textarea{resize:none;height:80px}
.modal-actions{display:flex;gap:6px}.modal-actions button,.sim-primary{padding:6px 5px;border-radius:6px;background:#2c2c2e;color:#ddd;font-size:12px;flex:1}
.modal-actions .primary,.sim-primary{background:#3b6bff;color:#fff;font-weight:600}
.modal-actions button:hover,.sim-primary:hover{filter:brightness(1.12)}
.five-slots{display:flex;gap:4px}.five-slots button{position:relative;height:26px;flex:1;min-width:0;border:1px solid #343434;background:#232323;border-radius:6px;display:flex;align-items:center;justify-content:center;color:#777;cursor:pointer}
.sim-dialog .sim-input{padding:4px 6px}
.five-slots button.is-empty:before,.five-slots button.is-empty:after{content:'';position:absolute;left:50%;top:50%;background:currentColor;border-radius:1.5px;transform:translate(-50%,-50%)}
.five-slots button.is-empty:before{width:14px;height:3px}
.five-slots button.is-empty:after{width:3px;height:14px}
.five-slots button:hover,.five-slots button:focus-visible{border-color:var(--accent);outline:none}
.edit-line{display:flex;gap:10px;align-items:center}.edit-preview{width:40px;height:40px;flex:none;border-radius:7px;border:1px solid #0007}.field-label{display:block;color:#999;font-size:10px;text-transform:uppercase;margin-bottom:4px}
.color-menu{z-index:80;width:150px}.color-menu button:last-child{color:#ff6767}
@media(max-width:285px){.library-toolbar{padding-left:8px;padding-right:8px;gap:5px}.collection-select-wrap{width:112px}.tool-square{width:29px;min-width:29px}.palette-list{padding-left:8px;padding-right:8px}}
@media(min-width:286px) and (max-width:360px){.library-toolbar{padding-left:10px;padding-right:10px;gap:6px}.collection-select-wrap{width:118px}.tool-square{width:30px;min-width:30px}}
@media(max-width:270px){.library-toolbar{padding:7px 6px;gap:4px;min-height:46px}.search-wrap{height:30px}.tool-square{width:28px;min-width:28px;height:30px}.filter-pill{margin:0 6px 4px}.palette-list{padding:18px 6px 12px;gap:18px}.palette-strip{height:34px;border-radius:6px}}
.header-actions{display:flex;align-items:center;gap:4px;flex:none}
.header-social{width:28px;height:28px;display:flex;align-items:center;justify-content:center;position:relative;border-radius:6px;color:var(--text-dim);text-decoration:none;transition:color .15s ease}
.header-social:hover,.header-social[aria-expanded="true"]{color:var(--accent)}
.header-social svg{display:block;width:15px;height:15px;pointer-events:none;transition:transform .2s ease;transform-origin:50% 50%}
.header-social--youtube svg{width:16px;height:16px}
.header-social--instagram:hover svg{transform:rotate(-22deg) scale(1.1)}
.header-social--youtube:hover svg{transform:scale(1.18)}
.header-social--notif:hover svg{animation:sim-notif-ring .5s ease}
@keyframes sim-notif-ring{0%,100%{transform:rotate(0)}25%{transform:rotate(-14deg)}50%{transform:rotate(11deg)}75%{transform:rotate(-7deg)}}
.notif-dot{position:absolute;top:2px;right:2px;width:6px;height:6px;border-radius:50%;background:var(--accent);border:1px solid var(--bg)}
.filter-menu{width:178px;max-width:calc(100vw - 8px);max-height:calc(100vh - 100px);border-radius:10px;padding:6px}
.filter-menu__title{padding:4px 7px 6px;color:var(--text-dim);font-size:10px;text-transform:uppercase;letter-spacing:.5px}
.filter-menu__divider{height:1px;margin:5px 7px;background:var(--border)}
.filter-menu__options{display:flex;flex-direction:column;gap:1px}
.filter-menu__option{width:100%;min-height:25px;padding:3px 7px;display:flex;align-items:center;gap:9px;text-align:left;border-radius:6px;font-size:11.5px;color:var(--text)}
.filter-menu__option:hover,.filter-menu__option[aria-pressed="true"]{background:var(--bg)}
.filter-menu__option[aria-pressed="true"]{color:#fff;font-weight:600}
.filter-menu__dot{width:10px;height:10px;border-radius:50%;flex:none;border:1px solid #0005}
.filter-menu__check{margin-left:auto;color:var(--accent);font-size:15px;line-height:1}
.filter-menu__option--style[aria-pressed="true"]{background:#28314f;color:#fff}
.filter-menu__clear{width:100%;text-align:left;color:var(--text-dim);font-size:11px;padding:7px;margin-top:5px;border-top:1px solid var(--border)}
.filter-menu__clear:hover{color:var(--accent)}
.notif-panel{width:236px;max-width:calc(100vw - 8px);max-height:calc(100vh - 48px);border-radius:10px;padding:9px}
.notif-panel__title{font-size:12px;font-weight:600;color:var(--text);padding:2px 4px 8px;display:flex;align-items:center;gap:7px}
.notif-panel__preview{font-size:8px;letter-spacing:.5px;color:var(--text-dim);font-weight:600}
.notif-panel__list{display:flex;flex-direction:column;gap:2px}
.notif-panel__empty{color:var(--text-dim);font-size:11px;text-align:center;padding:14px 4px}
.notif-item{width:100%;display:flex;align-items:flex-start;gap:7px;position:relative;text-align:left;padding:8px 6px 8px 12px;border-radius:7px;color:var(--text)}
.notif-item:hover{background:var(--bg)}
.notif-item__unread-dot{position:absolute;top:13px;left:2px;width:6px;height:6px;border-radius:50%;background:var(--accent)}
.notif-item__body{display:flex;flex-direction:column;gap:3px;min-width:0}
.notif-item__body strong{font-size:11.5px;font-weight:600;line-height:1.3}
.notif-item__body span{font-size:10.5px;line-height:1.35;color:var(--text-dim)}
.notif-item__body small{font-size:9.5px;color:var(--text-dim)}
.notif-item__thumb{width:38px;height:38px;border-radius:6px;flex:none;object-fit:cover;background:var(--bg)}
@media(max-width:210px){.header-actions .header-social--instagram,.header-actions .header-social--youtube{display:none}}
[data-host-theme="light"] #collection,[data-host-theme="light"] .search-wrap,[data-host-theme="light"] .tool-square{background:var(--bg-soft);border-color:var(--border);color:var(--text)}
[data-host-theme="light"] #search{color:var(--text)}
[data-host-theme="light"] .palette-name{color:var(--text-dim)}
[data-host-theme="light"] .filter-pill button{background:var(--bg-soft);border-color:var(--border);color:var(--text)}