.toolbar{max-width:var(--container-max);padding:var(--space-sm) var(--space-lg);justify-content:space-between;align-items:center;margin:0 auto;display:flex}.toolbar-left,.toolbar-right{align-items:center;gap:var(--space-sm);display:flex}.tool-btn{align-items:center;gap:var(--space-xs);padding:var(--space-xs) var(--space-sm);font-size:var(--text-sm);font-weight:var(--font-regular);border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-surface);cursor:pointer;color:var(--color-text-secondary);font-family:inherit;transition:all .15s;display:inline-flex}.tool-btn:hover{background:var(--color-accent-bg);border-color:var(--color-accent);color:var(--color-accent)}.tool-btn svg{flex-shrink:0}.new-image-btn{width:fit-content;margin-top:var(--space-sm);padding:10px var(--space-lg);font-size:var(--text-body);font-weight:var(--font-semibold);color:var(--color-surface);background:var(--color-accent);border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-fast);justify-content:center;align-self:center;align-items:center;gap:var(--space-sm);box-shadow:var(--shadow-card);border:none;font-family:inherit;display:none!important}.new-image-btn.visible{display:inline-flex!important}.new-image-btn:hover{background:var(--color-accent-hover)}.new-image-btn:active{transform:scale(.97)}.tool-btn-sm{padding:var(--space-xs) var(--space-sm);font-size:var(--text-sm);border:1px solid var(--color-border);background:var(--color-surface);cursor:pointer;color:var(--color-text-muted);border-radius:5px;font-family:inherit;transition:all .15s;display:none}.tool-btn-sm:hover{color:var(--color-error);background:#fff5f5;border-color:#feb2b2}.tool-status{font-size:var(--text-sm);color:var(--color-text-muted)}.tool-status.active{color:var(--color-success);font-weight:var(--font-regular)}.workspace{max-width:var(--container-max);padding:var(--space-lg) var(--space-lg) var(--space-lg);gap:var(--space-lg);align-items:flex-start;margin:0 auto;display:flex}.canvas-area{flex-direction:column;flex:1;align-items:center;min-width:0;display:flex}.drop-zone{border:2px dashed var(--color-border-hover);border-radius:var(--radius-lg);width:100%;padding:var(--space-3xl) var(--space-xl);text-align:center;cursor:pointer;transition:all var(--transition-smooth);background:var(--color-surface);animation:breathe 3s ease-in-out infinite, fadeIn var(--transition-smooth) both;flex-direction:column;align-items:center;display:flex}.drop-zone:hover,.drop-zone.dragover{border-color:var(--color-accent);background:var(--color-accent-bg);box-shadow:var(--shadow-card-hover);animation:none;transform:translateY(-2px)}.drop-text{font-size:var(--text-body);font-weight:var(--font-regular);color:var(--color-text);margin-bottom:var(--space-xs)}.drop-hint{font-size:var(--text-sm);color:var(--color-text-muted)}.drop-zone-input{display:none}.canvas-area canvas{cursor:crosshair;border-radius:var(--radius-lg);border:1px solid var(--color-border);max-width:100%;max-height:75vh;box-shadow:var(--shadow-card);display:none}.workspace.has-results .canvas-area canvas{max-height:50vh}.side-panel{width:var(--sidebar-width);gap:var(--space-sm);flex-direction:column;flex-shrink:0;display:none;position:sticky;top:70px}.workspace.has-results .side-panel{display:flex}.workspace:not(.has-results){justify-content:center}.workspace:not(.has-results) .canvas-area{flex:none;width:100%;max-width:700px}.picked-color{gap:var(--space-base);animation:fadeInUp var(--transition-smooth) both;align-items:flex-start;display:flex}.color-swatch{border-radius:var(--radius-lg);border:3px solid var(--color-surface);width:80px;height:80px;box-shadow:var(--shadow-swatch), 0 0 0 1px var(--color-border);transition:box-shadow var(--transition-fast);flex-shrink:0}.color-swatch[style*=background]{box-shadow:var(--shadow-swatch), 0 0 16px currentColor}.color-value{gap:0 var(--space-xs);font-size:var(--text-sm);font-family:var(--font-mono);grid-template-columns:38px 1fr;padding-top:2px;display:grid}.color-label{font-weight:var(--font-semibold);color:var(--color-text-muted);font-size:var(--text-caption);text-transform:uppercase;letter-spacing:.5px;line-height:1.9;font-family:var(--font-family)}.color-val{color:var(--color-text);line-height:1.9}.result-row{padding:var(--space-sm) var(--space-sm);border-radius:var(--radius-md);transition:background var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);animation:fadeInUp var(--transition-smooth) both;border-bottom:1px solid #f0f2f5;align-items:center;gap:10px;display:flex}.result-row:first-child{animation-delay:0s}.result-row:nth-child(2){animation-delay:50ms}.result-row:nth-child(3){animation-delay:.1s}.result-row:nth-child(4){animation-delay:.15s}.result-row:nth-child(5){animation-delay:.2s}.result-row:hover{background:var(--color-accent-bg);box-shadow:var(--shadow-card);transform:translateY(-1px)}.result-row:last-child{border-bottom:none}.result-swatch{border-radius:var(--radius-md);border:2px solid var(--color-surface);flex-shrink:0;width:40px;height:40px;box-shadow:0 1px 4px #0000001a}.result-info{flex:1;min-width:0}.result-thread{font-size:.82rem;font-weight:var(--font-semibold);color:var(--color-text)}.result-brand{color:var(--color-text-muted);margin-top:0;font-size:.73rem;line-height:1.3}.result-delta{color:var(--color-text-muted);font-size:.72rem;font-weight:var(--font-regular);align-items:center;gap:var(--space-xs);display:flex}.match-badge{border-radius:var(--radius-pill);font-size:10px;font-weight:var(--font-semibold);letter-spacing:.3px;text-transform:uppercase;padding:1px 8px;display:inline-block}.match-badge.imperceptible{color:#22543d;background:#c6f6d5}.match-badge.excellent{color:#276749;background:#c6f6d5}.match-badge.good{color:#744210;background:#fefcbf}.match-badge.fair{color:#7b341e;background:#feebc8}.match-badge.poor{color:#9b2c2c;background:#fed7d7}.result-checkbox{cursor:pointer;width:16px;height:16px;accent-color:var(--color-accent);flex-shrink:0}#customThreadRow{align-items:center;gap:var(--space-sm);padding:var(--space-xs) 0;border-top:1px solid var(--color-border);display:none}#customThreadInput{width:70px;padding:5px var(--space-xs);border:1px solid var(--color-border);border-radius:var(--radius-sm);font-family:inherit;font-size:.82rem}#customThreadInput:focus{border-color:var(--color-accent);box-shadow:var(--focus-ring);outline:none}#addCustomBtn{font-size:.78rem;font-weight:var(--font-regular);border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-surface);cursor:pointer;padding:5px 10px;font-family:inherit}#addCustomBtn:hover{background:var(--color-accent-bg);border-color:var(--color-accent);color:var(--color-accent)}.custom-thread-entry{align-items:center;gap:var(--space-sm);padding:3px 0;display:flex}.custom-thread-entry .result-info{color:var(--color-text-secondary);font-size:.82rem}#selectedList{padding-top:var(--space-sm);border-top:2px solid var(--color-border);display:none}#selectedList .selected-header{font-size:.65rem;font-weight:var(--font-semibold);color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.8px;margin-bottom:var(--space-xs)}.selected-item{align-items:center;gap:var(--space-xs);padding:3px 0;font-size:.82rem;display:flex}.selected-item .remove-btn{color:var(--color-border-hover);cursor:pointer;background:0 0;border:none;padding:0 3px;font-size:.9rem;line-height:1}.selected-item .remove-btn:hover{color:var(--color-error)}.selected-item .brand-label{color:var(--color-text-muted);font-size:.75rem}#copyButton{width:100%;padding:9px var(--space-sm);font-size:.82rem;font-weight:var(--font-semibold);cursor:pointer;background:var(--color-accent);color:var(--color-surface);border-radius:var(--radius-md);border:none;font-family:inherit;transition:all .15s;display:none}#copyButton:hover{background:var(--color-accent-hover)}#fallbackTextarea{width:100%;height:80px;font-family:var(--font-mono);border:1px solid var(--color-border);border-radius:var(--radius-sm);padding:var(--space-xs);box-sizing:border-box;resize:vertical;font-size:.72rem;display:none}#closeTextareaButton{cursor:pointer;background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-sm);width:100%;padding:5px 10px;font-family:inherit;font-size:.72rem;display:none}#closeTextareaButton:hover{background:#edf2f7}.color-input-row{width:100%;margin-top:var(--space-base);gap:var(--space-sm);grid-template-columns:1fr 1fr;display:grid}#cmykSection{grid-column:1/-1}.color-input-section{border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-sm);background:var(--color-surface);box-shadow:var(--shadow-card);flex:1}.color-input-label{font-size:var(--text-caption);font-weight:var(--font-semibold);color:var(--color-text-secondary);text-transform:uppercase;letter-spacing:.8px;margin-bottom:var(--space-sm)}.color-input-fields{gap:var(--space-xs);display:grid}.cmyk-inputs{grid-template-columns:1fr 1fr 1fr 1fr}.rgb-inputs{grid-template-columns:1fr 1fr 1fr}.color-input-field{align-items:center;gap:3px;display:flex}.color-input-field label{font-size:var(--text-sm);font-weight:var(--font-semibold);color:var(--color-text-secondary);min-width:12px}.color-input-field input[type=number]{width:100%;min-width:0;height:34px;font-size:var(--text-body);text-align:center;border:1px solid var(--color-border);border-radius:var(--radius-sm);box-sizing:border-box;color:var(--color-text);padding:0;font-family:inherit;transition:all .15s}.color-input-field input[type=number]:focus{border-color:var(--color-accent);box-shadow:var(--focus-ring);outline:none}.color-input-field input[type=number].input-error{border-color:var(--color-error)}.field-suffix{color:var(--color-text-muted);font-size:11px}.hex-input-row{align-items:center;gap:var(--space-xs);display:flex}.hex-hash{font-size:var(--text-body);font-weight:var(--font-semibold);color:var(--color-text-muted)}.hex-input-row input[type=text]{width:100%;height:34px;font-size:var(--text-body);text-align:center;border:1px solid var(--color-border);border-radius:var(--radius-sm);padding:0 var(--space-sm);box-sizing:border-box;color:var(--color-text);text-transform:uppercase;letter-spacing:1px;font-family:inherit;transition:all .15s}.hex-input-row input[type=text]:focus{border-color:var(--color-accent);box-shadow:var(--focus-ring);outline:none}.hex-input-row input[type=text].input-error{border-color:var(--color-error)}.color-match-btn{width:100%;margin-top:var(--space-sm);padding:9px var(--space-sm);font-size:.82rem;font-weight:var(--font-semibold);cursor:pointer;background:var(--color-accent);color:var(--color-surface);border-radius:var(--radius-md);border:none;font-family:inherit;transition:all .15s}.color-match-btn:hover{background:var(--color-accent-hover)}.color-input-warning{font-size:var(--text-sm);color:var(--color-error);margin-top:var(--space-xs)}.magnifier-glass{border:3px solid var(--color-surface);pointer-events:none;z-index:9999;border-radius:50%;width:140px;height:140px;display:none;position:fixed;overflow:hidden;box-shadow:0 4px 20px #00000059,0 0 0 1px #00000026}.magnifier-glass canvas{border-radius:50%;width:100%;height:100%;display:block}.magnifier-color-bar{display:none}.results-loading{color:var(--color-text-muted);padding:var(--space-lg) 0;text-align:center;font-size:.82rem}.results-loading:before{content:"";width:24px;height:24px;margin:0 auto var(--space-sm);border:2.5px solid var(--color-border);border-top-color:var(--color-accent);border-radius:50%;animation:.7s linear infinite spin;display:block}@keyframes spin{to{transform:rotate(360deg)}}.results-error{color:var(--color-error);padding:var(--space-base) 0;text-align:center;animation:fadeIn var(--transition-smooth) both;font-size:.82rem}.inventory-saved{color:var(--color-success);margin-left:var(--space-xs);font-size:.72rem}@media (width<=1024px){.workspace{gap:var(--space-base)}.side-panel{width:var(--sidebar-width-tablet)}}@media (width<=767px){.toolbar{padding:var(--space-sm) var(--space-base);flex-wrap:wrap}.workspace{padding:var(--space-base) var(--space-base) var(--space-base);flex-direction:column}.workspace.has-results .canvas-area{display:contents}.workspace.has-results .canvas-area canvas{order:1;width:100%}.workspace.has-results .canvas-area .new-image-btn{order:2}.workspace.has-results .side-panel{order:3}.workspace.has-results .color-input-row{order:4}.color-input-row{flex-direction:column;width:100%}.side-panel{width:100%;position:static}.drop-zone{padding:var(--space-xl) var(--space-base)}.color-input-section{padding:var(--space-sm)}.result-checkbox{box-sizing:content-box;width:18px;min-width:28px;height:18px;min-height:28px;padding:5px}.tool-btn,#addCustomBtn,#copyButton,.color-match-btn{min-height:44px}}.onboarding-overlay{background:var(--color-bg);z-index:900;padding:var(--space-base);justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.onboarding-card{background:var(--color-surface);border-radius:var(--radius-lg);padding:var(--space-xl);width:100%;max-width:520px;box-shadow:var(--shadow-login)}.onboarding-steps{justify-content:center;gap:var(--space-sm);margin-bottom:var(--space-lg);display:flex}.onboarding-dot{background:var(--color-border);border-radius:50%;width:8px;height:8px;transition:background .2s}.onboarding-dot.active{background:var(--color-accent)}.onboarding-step{display:none}.onboarding-step.active{display:block}.onboarding-heading{font-size:var(--text-heading);font-weight:var(--font-semibold);color:var(--color-text-strong);margin-bottom:var(--space-sm);line-height:var(--line-height-heading)}.onboarding-subtext{font-size:var(--text-body);color:var(--color-text-muted);margin-bottom:var(--space-lg);line-height:var(--line-height-body)}.onboarding-brands{margin-bottom:var(--space-lg);list-style:none}.onboarding-brand-row{align-items:center;gap:var(--space-sm);min-height:44px;display:flex}.onboarding-brand-row input[type=checkbox]{cursor:pointer;width:18px;height:18px;accent-color:var(--color-accent);flex-shrink:0}.onboarding-brand-row label{font-size:var(--text-body);color:var(--color-text);cursor:pointer;font-weight:var(--font-regular)}.onboarding-brand-row .onboarding-thread-count{font-size:var(--text-sm);color:var(--color-text-muted)}.onboarding-brand-error{font-size:var(--text-sm);color:var(--color-error);margin-bottom:var(--space-sm);display:none}.onboarding-how{gap:var(--space-lg);margin-bottom:var(--space-lg);text-align:center;grid-template-columns:1fr 1fr 1fr;display:grid}.onboarding-how-item svg{color:var(--color-accent);margin-bottom:var(--space-sm)}.onboarding-how-label{font-size:var(--text-body);font-weight:var(--font-regular);color:var(--color-text);margin-bottom:var(--space-xs)}.onboarding-how-hint{font-size:var(--text-sm);color:var(--color-text-muted);line-height:var(--line-height-body)}.onboarding-btn{width:100%;padding:var(--space-sm) var(--space-base);min-height:44px;font-size:var(--text-body);font-weight:var(--font-semibold);color:#fff;background:var(--color-accent);border-radius:var(--radius-md);cursor:pointer;font-family:var(--font-family);border:none;transition:background .15s;display:block}.onboarding-btn:hover{background:var(--color-accent-hover)}.onboarding-btn:disabled{background:var(--color-border-hover);cursor:not-allowed}@media (width<=767px){.onboarding-card{padding:var(--space-lg)}.onboarding-how{gap:var(--space-base);grid-template-columns:1fr}}