.matcher{padding-top:48px;padding-bottom:65px}.matcher-heading h1{font-size:clamp(42px,5vw,76px);margin:14px 0}.matcher-heading p{font-size:18px}.matcher-workspace{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.4fr);gap:50px;margin-top:35px}.matcher-upload{align-self:start;border:1px solid #ddd;padding:24px;background:#fff}.upload-drop{cursor:pointer;display:flex;min-height:320px;align-items:center;justify-content:center;flex-direction:column;gap:14px;border:1px dashed #aaa;background:white}.upload-drop.dragging{border-color:#b54e35;background:#fff8f5}.upload-icon{font-size:58px;font-weight:300;color:#b54e35}.upload-drop strong{font-size:24px}.upload-drop span:last-of-type{font-size:14px;color:#555}.upload-drop input{width:100%;padding:12px;text-align:center;font-size:14px}.crop-heading,.result-heading,.offline-row{display:flex;justify-content:space-between;align-items:center;gap:18px}.crop-heading button,#whole-photo{border:0;background:white;text-decoration:underline;font-size:14px;cursor:pointer}.crop-stage{margin-top:20px;background:white}.crop-stage canvas{display:block;width:100%;height:auto;touch-action:none;cursor:crosshair}.crop-help,.match-status,.matcher-note{font-size:14px;line-height:1.6}.match-status{min-height:24px;margin-bottom:0}.match-controls{display:flex;gap:16px;flex-wrap:wrap;align-items:end;margin-top:24px}.match-controls .field{flex:1;min-width:170px}.match-controls select,.result-heading select{padding:12px;border:1px solid #ccc;background:#fff;width:100%}.result-heading h2{font-size:30px;margin:0}.result-heading .field{max-width:180px}.match-empty{min-height:320px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:25px}.match-empty p{max-width:350px;line-height:1.7;color:#555}.sample-palette{display:flex;gap:10px}.sample-palette span{width:36px;height:36px;border-radius:50%;background:#3e5e70}.sample-palette span:nth-child(2){background:#b54e35}.sample-palette span:nth-child(3){background:#c49735}.sample-palette span:nth-child(4){background:#465738}.match-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:25px 18px;margin:24px 0}.match-card{text-decoration:none;color:inherit;min-width:0}.match-card img{height:195px;width:100%;object-fit:contain;background:white}.match-card h3{font-size:16px;line-height:1.4;margin:12px 0 4px}.match-card p{font-size:14px;color:#555;margin:0}.match-card:hover img{transform:scale(1.035)}.match-card img{transition:transform .2s}.match-card:focus-visible{outline:2px solid #3e5e70;outline-offset:6px}.matcher-note{margin-top:38px;border-top:1px solid #ddd;padding-top:22px}.offline-row{font-size:14px;flex-wrap:wrap}.offline-row button{border:0;background:white;cursor:pointer;font:inherit}#result-summary{font-size:14px;color:#555}button:disabled{opacity:.5;cursor:wait}[hidden]{display:none!important}@media(max-width:800px){.matcher-workspace{grid-template-columns:1fr;gap:30px}.matcher{padding-top:30px}.matcher-upload{padding:16px}.match-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.match-card img{height:180px}.result-heading{align-items:end}.result-heading h2{font-size:26px}}
.crop-stage{display:flex;justify-content:center}.crop-stage canvas{width:auto;height:auto;max-width:100%;max-height:380px}.matcher-upload .crop-help{margin-top:16px}