:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media(prefers-color-scheme:light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}:root{--bg-primary: #0a0a0f;--bg-secondary: #12121a;--bg-tertiary: #1a1a2e;--bg-card: #16162a;--bg-hover: #252545;--accent-primary: #6366f1;--accent-secondary: #8b5cf6;--accent-gradient: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);--text-primary: #f8fafc;--text-secondary: #94a3b8;--text-muted: #64748b;--success: #10b981;--warning: #f59e0b;--error: #ef4444;--border-color: rgba(99, 102, 241, .2);--border-radius: 12px;--border-radius-sm: 8px;--shadow-md: 0 4px 20px rgba(0, 0, 0, .4)}*{margin:0;padding:0;box-sizing:border-box}html,body,#root{height:100%;width:100%;overflow-x:hidden}body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:var(--bg-primary);color:var(--text-primary);line-height:1.5}.app{display:flex;flex-direction:column;min-height:100vh;width:100%}.app-nav{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.75rem;padding:.75rem 1rem;background:var(--bg-secondary);border-bottom:1px solid var(--border-color);position:sticky;top:0;z-index:100}.nav-brand{display:flex;align-items:center;gap:.5rem;flex-shrink:0}.nav-logo{font-size:1.25rem}.nav-title{font-weight:700;font-size:.9rem;background:var(--accent-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.nav-links{display:flex;gap:.25rem;flex-wrap:wrap}.nav-link{padding:.4rem .75rem;background:transparent;border:1px solid transparent;border-radius:var(--border-radius-sm);color:var(--text-secondary);text-decoration:none;font-size:.8rem;white-space:nowrap;transition:all .15s ease}.nav-link:hover{background:var(--bg-tertiary);color:var(--text-primary)}.nav-link.active{background:var(--accent-gradient);color:#fff}.app-main{flex:1;overflow:auto;display:flex;flex-direction:column}.page-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:300px;gap:1rem;padding:2rem}.spinner{width:40px;height:40px;border:3px solid var(--bg-tertiary);border-top-color:var(--accent-primary);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.page-header{padding:1rem;background:var(--bg-secondary);border-bottom:1px solid var(--border-color)}.page-header h1{font-size:1.25rem;margin-bottom:.25rem}.page-header .subtitle{color:var(--text-muted);font-size:.8rem}.header-stats{display:flex;flex-wrap:wrap;align-items:center;gap:1rem;margin-top:.5rem}.stat{color:var(--text-secondary);font-size:.8rem}.stat strong{color:var(--accent-primary)}.progress-bar{width:100px;height:18px;background:var(--bg-tertiary);border-radius:9px;overflow:hidden;position:relative}.progress-fill{height:100%;background:var(--accent-gradient);transition:width .25s ease}.progress-text{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:.65rem;font-weight:600}.error-banner{background:#ef44441a;color:#fca5a5;padding:.5rem 1rem;font-size:.8rem}.matcher-page,.matcher-content{display:flex;flex-direction:column;flex:1;overflow:hidden}.variant-sidebar{background:var(--bg-secondary);border-bottom:1px solid var(--border-color);max-height:35vh;overflow:hidden;display:flex;flex-direction:column}.variant-sidebar h2{padding:.75rem 1rem;font-size:.75rem;text-transform:uppercase;letter-spacing:.5px;color:var(--text-muted);border-bottom:1px solid var(--border-color);flex-shrink:0}.variant-list{flex:1;overflow-y:auto;padding:.5rem}.variant-group{margin-bottom:.25rem}.variant-group-title{font-size:.65rem;text-transform:uppercase;color:var(--text-muted);padding:.5rem .5rem .25rem;margin-top:.25rem}.variant-item{display:flex;align-items:center;gap:.5rem;width:100%;padding:.4rem .5rem;background:transparent;border:none;border-radius:6px;color:var(--text-primary);font-size:.8rem;cursor:pointer;transition:background .1s ease;text-align:left}.variant-item:hover{background:var(--bg-hover)}.variant-item.selected{background:var(--accent-gradient);color:#fff}.variant-item.linked .variant-status{color:var(--success)}.variant-status{font-size:.8rem;width:1rem;text-align:center}.variant-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.variant-thumb{width:24px;height:24px;object-fit:cover;border-radius:4px;background:var(--bg-tertiary);flex-shrink:0}.mockup-picker{display:flex;flex-direction:column;flex:1;padding:1rem;overflow:hidden}.picker-header{display:flex;flex-direction:column;gap:.75rem;margin-bottom:.75rem}.picker-header h2{font-size:.9rem;color:var(--text-secondary)}.picker-header h2 strong{color:var(--text-primary)}.picker-controls{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}.search-input{flex:1;min-width:150px;padding:.5rem .75rem;background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:6px;color:var(--text-primary);font-size:.8rem}.search-input:focus{outline:none;border-color:var(--accent-primary)}.show-all-toggle{display:flex;align-items:center;gap:.4rem;font-size:.8rem;color:var(--text-secondary);cursor:pointer;white-space:nowrap}.mockup-info{display:flex;justify-content:space-between;font-size:.7rem;color:var(--text-muted);margin-bottom:.75rem;padding-bottom:.5rem;border-bottom:1px solid var(--border-color)}.saving-overlay{position:fixed;inset:0;background:#000c;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;z-index:1000}.mockup-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:.75rem;flex:1;overflow-y:auto;padding-bottom:.5rem}.mockup-card{background:var(--bg-card);border:2px solid transparent;border-radius:8px;overflow:hidden;cursor:pointer;transition:all .15s ease}.mockup-card:hover{border-color:var(--accent-primary)}.mockup-card.current{border-color:var(--success);box-shadow:0 0 15px #10b98140}.mockup-image-container{position:relative;aspect-ratio:3/4;background:var(--bg-tertiary);overflow:hidden}.mockup-image-container img{width:100%;height:100%;object-fit:contain}.preview-btn{position:absolute;bottom:4px;right:4px;width:24px;height:24px;background:#000000b3;border:none;border-radius:50%;font-size:.7rem;cursor:pointer;opacity:0;transition:opacity .1s ease}.mockup-card:hover .preview-btn{opacity:1}.mockup-name{display:block;padding:.4rem;font-size:.6rem;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center}.pagination{display:flex;align-items:center;justify-content:center;gap:.75rem;padding:.75rem;flex-shrink:0}.pagination button{padding:.4rem .75rem;background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:6px;color:var(--text-primary);font-size:.75rem;cursor:pointer}.pagination button:hover:not(:disabled){background:var(--accent-primary)}.pagination button:disabled{opacity:.4;cursor:not-allowed}.pagination span{font-size:.75rem;color:var(--text-muted)}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;text-align:center;color:var(--text-muted);padding:2rem}.empty-icon{font-size:3rem;margin-bottom:1rem}.empty-state h3{font-size:1rem;margin-bottom:.5rem;color:var(--text-primary)}.empty-state p{font-size:.8rem}.preview-modal{position:fixed;inset:0;background:#000000e6;display:flex;align-items:center;justify-content:center;z-index:1000;padding:1rem}.preview-content{position:relative;max-width:95vw;max-height:90vh}.preview-content img{max-width:100%;max-height:85vh;object-fit:contain;border-radius:8px}.close-btn{position:absolute;top:-40px;right:0;width:36px;height:36px;background:var(--bg-tertiary);border:none;border-radius:50%;color:var(--text-primary);font-size:1.25rem;cursor:pointer}.taxonomy-page{padding:1rem;overflow-y:auto}.taxonomy-grid{display:flex;flex-direction:column;gap:.75rem;margin-top:1rem}.taxonomy-section{background:var(--bg-secondary);border-radius:8px;overflow:hidden}.taxonomy-header{display:flex;align-items:center;gap:.75rem;width:100%;padding:.75rem 1rem;background:var(--bg-tertiary);border:none;color:var(--text-primary);font-size:.9rem;cursor:pointer;text-align:left}.taxonomy-header:hover{background:var(--bg-hover)}.taxonomy-icon{font-size:1.25rem}.taxonomy-title{flex:1;font-weight:600}.taxonomy-count{color:var(--text-muted);font-size:.75rem}.taxonomy-toggle{color:var(--text-muted)}.taxonomy-content{padding:1rem}.taxonomy-subcategory{margin-bottom:1.25rem}.subcategory-title{font-size:.8rem;color:var(--accent-primary);margin-bottom:.75rem;padding-bottom:.5rem;border-bottom:1px solid var(--border-color)}.variants-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:.75rem}.variant-card{background:var(--bg-card);border-radius:6px;overflow:hidden;border:2px solid transparent}.variant-card.has-image{border-color:#10b9814d}.variant-card.no-image{border-color:#f59e0b33}.variant-image{aspect-ratio:3/4;background:var(--bg-tertiary);display:flex;align-items:center;justify-content:center;overflow:hidden}.variant-image img{width:100%;height:100%;object-fit:contain}.no-image-placeholder{display:flex;flex-direction:column;align-items:center;gap:.25rem;color:var(--text-muted)}.no-image-placeholder span{font-size:1.5rem;opacity:.4}.no-image-placeholder small{font-size:.55rem}.variant-info{padding:.5rem;text-align:center}.variant-name{display:block;font-size:.65rem;font-weight:500;margin-bottom:.25rem}.variant-status{font-size:.55rem;padding:.15rem .4rem;border-radius:3px}.variant-status.linked{background:#10b98133;color:var(--success)}.variant-status.pending{background:#f59e0b33;color:var(--warning)}.taxonomy-legend{margin-top:1.5rem;padding:.75rem;background:var(--bg-secondary);border-radius:6px}.taxonomy-legend h3{font-size:.75rem;margin-bottom:.5rem}.legend-items{display:flex;flex-wrap:wrap;gap:1rem}.legend-item{font-size:.7rem}.legend-item.linked{color:var(--success)}.legend-item.pending{color:var(--warning)}.test-page{padding:1rem;overflow-y:auto}.test-container{display:flex;flex-direction:column;gap:1rem;margin-top:1rem}.test-config,.test-result{background:var(--bg-secondary);padding:1rem;border-radius:8px}.test-config h2,.test-result h2{font-size:.9rem;margin-bottom:1rem;padding-bottom:.5rem;border-bottom:1px solid var(--border-color)}.test-config h3{font-size:.75rem;color:var(--text-muted);margin:1rem 0 .5rem}.config-group{margin-bottom:.75rem}.config-group label{display:block;font-size:.7rem;color:var(--text-muted);margin-bottom:.35rem}.config-group select{width:100%;padding:.5rem .75rem;background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:6px;color:var(--text-primary);font-size:.8rem}.config-group select:focus{outline:none;border-color:var(--accent-primary)}.config-group.small{margin-bottom:.5rem}.config-group.small select{padding:.4rem .6rem;font-size:.75rem}.reset-btn{width:100%;padding:.6rem;margin-top:1rem;background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:6px;color:var(--text-primary);font-size:.8rem;cursor:pointer}.reset-btn:hover{background:var(--bg-hover)}.result-content{display:flex;flex-direction:column;gap:1rem}.result-image{aspect-ratio:3/4;max-height:300px;background:var(--bg-tertiary);border-radius:8px;overflow:hidden;display:flex;align-items:center;justify-content:center}.result-image img{max-width:100%;max-height:100%;object-fit:contain}.no-image-large{display:flex;flex-direction:column;align-items:center;gap:.75rem;color:var(--text-muted);text-align:center;padding:1.5rem}.no-image-large span{font-size:3rem;opacity:.4}.no-image-large p{font-size:.9rem}.no-image-large small{font-size:.7rem}.result-details h3{font-size:1.25rem;margin-bottom:.35rem}.result-category{color:var(--text-muted);font-size:.8rem;margin-bottom:1rem}.result-attributes{margin-bottom:1rem}.result-attributes h4{font-size:.75rem;margin-bottom:.5rem;color:var(--text-secondary)}.result-attributes ul{list-style:none}.result-attributes li{font-size:.8rem;padding:.15rem 0}.result-attributes strong{text-transform:capitalize;color:var(--text-muted)}.result-status{padding:.75rem;border-radius:6px;font-size:.85rem}.result-status.linked{background:#10b9811a;border:1px solid rgba(16,185,129,.3);color:var(--success)}.result-status.pending{background:#f59e0b1a;border:1px solid rgba(245,158,11,.3);color:var(--warning)}.result-status small{display:block;font-size:.65rem;margin-top:.25rem;opacity:.8}.no-selection{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:200px;text-align:center;color:var(--text-muted)}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:var(--bg-secondary)}::-webkit-scrollbar-thumb{background:var(--bg-tertiary);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--accent-primary)}@media(min-width:768px){.app-nav{padding:.75rem 1.5rem}.nav-title{font-size:1rem}.nav-link{padding:.5rem 1rem;font-size:.85rem}.page-header{padding:1.25rem 1.5rem}.page-header h1{font-size:1.4rem}.matcher-content{flex-direction:row}.variant-sidebar{width:260px;max-height:none;border-bottom:none;border-right:1px solid var(--border-color);flex-shrink:0}.mockup-picker{padding:1.5rem}.picker-header{flex-direction:row;align-items:center;justify-content:space-between}.mockup-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:1rem}.taxonomy-page{padding:1.5rem}.variants-grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}.test-page{padding:1.5rem}.test-container{flex-direction:row}.test-config{width:320px;flex-shrink:0}.test-result{flex:1}.result-content{flex-direction:row;gap:1.5rem}.result-image{width:45%;max-height:400px}.result-details{flex:1}}@media(min-width:1024px){.variant-sidebar{width:280px}.mockup-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}.variants-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}.test-config{width:350px}}