.cc-root{--cc-bg: #1e1f22;--cc-panel: #26282d;--cc-panel-hover: #2c3138;--cc-border: #4a4d55;--cc-border-solid: #3a3d44;--cc-text: #e6e6e6;--cc-muted: #9aa0a6;--cc-accent: #f4ff9e;--cc-accent-hover: #fbffc4;--cc-on-accent: #000;--cc-radius: 12px;font-family:Poppins,Segoe UI,sans-serif;color:var(--cc-text);max-width:min(1280px,96vw);margin:0 auto}.cc-root .cc-header{text-align:center;margin:0 0 28px}.cc-root .cc-title{font-size:30px;font-weight:700;margin:0 0 8px}.cc-root .cc-subtitle{font-size:16px;color:var(--cc-muted);margin:0}.cc-root .cc-layout{display:flex;flex-direction:column;gap:20px;align-items:stretch}@media screen and (min-width:700px){.cc-root[data-orientation=portrait] .cc-layout,.cc-root[data-palette=shown] .cc-layout{flex-direction:row;align-items:flex-start}.cc-root[data-orientation=portrait]:not([data-palette=shown]) .cc-image-pane{flex:0 0 auto;width:42%;max-width:42%}.cc-root[data-palette=shown] .cc-image-pane{flex:0 1 auto;max-width:58%}.cc-root[data-orientation=portrait] .cc-results,.cc-root[data-palette=shown] .cc-results{flex:1 1 0;min-width:0}}.cc-root .cc-image-pane{width:100%}.cc-root .cc-dropzone{position:relative;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:16px;min-height:220px;padding:24px;border:2px dashed var(--cc-border);border-radius:var(--cc-radius);background:var(--cc-panel);cursor:pointer;transition:border-color .15s ease,background .15s ease;outline:none}.cc-root .cc-dropzone:hover,.cc-root .cc-dropzone:focus-visible,.cc-root .cc-dropzone.is-hover{border-color:var(--cc-accent);background:var(--cc-panel-hover)}.cc-root .cc-preview{max-width:100%;max-height:clamp(200px,58vh,860px);width:auto;height:auto;object-fit:contain;border-radius:8px;display:block}.cc-root .cc-hint{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;color:var(--cc-muted);pointer-events:none}.cc-root .cc-hint-strong{font-size:16px;font-weight:600;color:var(--cc-text)}.cc-root .cc-hint-sub{font-size:13px}.cc-root .cc-results{width:100%}.cc-root .cc-result{font-size:22px;font-weight:600;margin:0 0 6px;text-align:center}.cc-root .cc-details{color:var(--cc-muted);font-size:12px;margin:0 0 16px;text-align:center;min-height:1em}.cc-root .cc-result.is-error{color:#ff7b7b}.cc-root .cc-swatch-header{color:var(--cc-muted);font-size:12px;margin:0 0 10px;text-align:center}.cc-root .cc-swatch-scroll{display:block;box-sizing:border-box;border:1px solid var(--cc-border-solid);border-radius:8px;background:var(--cc-panel);padding:6px;max-height:clamp(280px,50vh,760px);overflow:auto}@media screen and (max-width:699px){.cc-root .cc-swatch-scroll{max-height:clamp(180px,45vh,520px)}}.cc-root .cc-swatch-flow{display:flex;box-sizing:border-box;flex-wrap:nowrap;gap:8px;align-items:flex-start}.cc-root .cc-swatch-col{display:flex;box-sizing:border-box;flex-direction:column;gap:3px}.cc-root .cc-swatch{display:block;box-sizing:border-box;flex:0 0 22px;width:22px;height:22px;min-height:22px;border:1px solid rgba(0,0,0,.33);border-radius:3px}.cc-root .cc-actions{display:flex;justify-content:center;margin-top:20px}.cc-root .cc-browse{background:var(--cc-accent);color:var(--cc-on-accent);border:none;border-radius:8px;padding:10px 24px;font-size:14px;font-weight:600;cursor:pointer;transition:background .15s ease}.cc-root .cc-browse:hover{background:var(--cc-accent-hover)}@media(max-width:768px){.cc-root .cc-title{font-size:24px}.cc-root .cc-subtitle{font-size:14px}}
/*# sourceMappingURL=/cdn/shop/t/8/assets/color-counter.css.map */