:root{--bg:#dedede;--ink:#101010;--blue:#12a8ff;--deep:#034f9d;--panel:#ededed;--line:#8c8c8c}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--bg);color:var(--ink);font-family:Arial,Helvetica,sans-serif}
.page{max-width:1700px;margin:auto;padding:28px 22px 48px}.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
.backlink{color:#111;text-decoration:none;font-weight:700;border:2px outset #eee;background:#d5d5d5;padding:8px 14px}
.archive-count{font-size:14px;color:#444}
.matcher-layout{display:grid;grid-template-columns:minmax(250px,31%) minmax(460px,1fr) minmax(270px,27%);gap:24px;align-items:start}
.intro h1{font-size:36px;line-height:1.15;font-weight:500;margin:0 0 34px;text-transform:uppercase}
.intro p{font-size:27px;line-height:1.28;margin:0 0 28px;max-width:440px}
.upload-button{width:120px;height:120px;border:0;border-radius:29px;background:linear-gradient(#1698ff,#0756be);box-shadow:inset 0 1px 0 #9bd8ff,0 3px 9px rgba(0,0,0,.25);cursor:pointer;position:relative;transition:transform .18s}
.upload-button:hover{transform:scale(1.04)}.upload-button:active{transform:scale(.96)}
.upload-button:before{content:"";position:absolute;left:46px;top:27px;width:28px;height:48px;background:#fff;border-radius:6px}
.upload-button:after{content:"";position:absolute;left:26px;bottom:20px;width:68px;height:35px;border:10px solid #fff;border-top:0;border-radius:0 0 13px 13px}
.arrow:before{content:"";position:absolute;left:35px;top:17px;border-left:25px solid transparent;border-right:25px solid transparent;border-bottom:25px solid white}
.file-input{display:none}.upload-meta{font-size:15px;margin-top:14px;color:#444;line-height:1.45}
.privacy-note{margin-top:26px;border-top:1px solid #aaa;padding-top:14px;font-size:14px;line-height:1.45;color:#444}
.scan-shell{position:relative}.scan-panel{background:linear-gradient(145deg,#0b2946,#061520);min-height:510px;position:relative;overflow:hidden;border:1px solid #777;box-shadow:0 2px 8px rgba(0,0,0,.25)}
.scan-image{display:block;width:100%;height:510px;object-fit:contain;background:#07131e}
.hud-grid{position:absolute;inset:0;pointer-events:none;background:
linear-gradient(rgba(23,165,255,.16) 1px,transparent 1px),
linear-gradient(90deg,rgba(23,165,255,.16) 1px,transparent 1px);background-size:56px 56px}
.crosshair:before,.crosshair:after{content:"";position:absolute;background:rgba(52,190,255,.8);box-shadow:0 0 9px #15a8ff}
.crosshair:before{left:4%;right:4%;top:50%;height:1px}.crosshair:after{top:4%;bottom:4%;left:50%;width:1px}
.radar{position:absolute;left:50%;top:50%;width:72%;aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);border:1px solid rgba(40,184,255,.55)}
.radar:before,.radar:after{content:"";position:absolute;border-radius:50%;inset:14%;border:1px solid rgba(40,184,255,.45)}
.radar:after{inset:30%;border-color:rgba(40,184,255,.6)}
.radar-arm{position:absolute;left:50%;top:50%;width:36%;height:36%;transform-origin:0 0;overflow:hidden}
.radar-arm:before{content:"";position:absolute;left:0;top:-2px;width:100%;height:100%;background:conic-gradient(from 270deg at 0 0,rgba(33,181,255,.7),rgba(33,181,255,.2) 23deg,transparent 44deg);filter:drop-shadow(0 0 10px #00a8ff)}
.scanning .radar-arm{animation:sweep 2.6s linear infinite}
@keyframes sweep{to{transform:rotate(360deg)}}
.pulse{position:absolute;left:50%;top:50%;width:20%;aspect-ratio:1;border:2px solid rgba(45,190,255,.65);border-radius:50%;transform:translate(-50%,-50%);opacity:0}
.scanning .pulse{animation:pulse 2.1s ease-out infinite}.scanning .pulse.p2{animation-delay:.7s}.scanning .pulse.p3{animation-delay:1.4s}
@keyframes pulse{0%{width:18%;opacity:.75}100%{width:78%;opacity:0}}
.scan-line{position:absolute;left:5%;right:5%;height:3px;top:8%;background:#51caff;box-shadow:0 0 12px 5px rgba(34,180,255,.65);opacity:0}
.scanning .scan-line{opacity:1;animation:scan 1.25s ease-in-out infinite alternate}
@keyframes scan{to{top:91%}}
.hud-copy{position:absolute;top:17px;left:17px;color:#73d4ff;font:12px/1.5 "Courier New",monospace;text-shadow:0 0 5px #008cff;white-space:pre}
.corner{position:absolute;width:46px;height:46px;border-color:#51ccff;opacity:.9;transition:all .35s}
.c1{left:7%;top:7%;border-left:3px solid;border-top:3px solid}.c2{right:7%;top:7%;border-right:3px solid;border-top:3px solid}
.c3{left:7%;bottom:7%;border-left:3px solid;border-bottom:3px solid}.c4{right:7%;bottom:7%;border-right:3px solid;border-bottom:3px solid}
.locked .corner{left:21%;right:auto;top:20%;bottom:auto}.locked .c2{left:auto;right:21%}.locked .c3{top:auto;bottom:20%}.locked .c4{left:auto;right:21%;top:auto;bottom:20%}
.lock-flash{position:absolute;inset:0;background:rgba(53,196,255,.33);opacity:0;pointer-events:none}.locked .lock-flash{animation:flash .6s ease-out}
@keyframes flash{0%{opacity:.8}100%{opacity:0}}
.progress-wrap{background:#e7e7e7;border:1px solid #999;border-top:0;padding:9px 12px}
.status-row{display:flex;justify-content:space-between;gap:12px;font-weight:700;font-size:14px}.progress{height:10px;background:#bbb;border:1px inset #aaa;margin-top:7px;overflow:hidden}
.progress-bar{height:100%;width:0;background:linear-gradient(90deg,#0860c0,#2cc3ff);transition:width .32s ease}
.bottom-results{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:12px}.results-side{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.result-card{min-width:0;cursor:pointer;text-decoration:none;color:#090909;display:block;opacity:0;transform:translateY(18px) scale(.97);transition:transform .25s,box-shadow .25s}
.result-card.show{animation:reveal .42s forwards}@keyframes reveal{to{opacity:1;transform:translateY(0) scale(1)}}
.result-card:hover{transform:translateY(-3px) scale(1.025);box-shadow:0 7px 18px rgba(0,0,0,.25)}
.result-card img{display:block;width:100%;aspect-ratio:1.3/1;object-fit:contain;background:#f6f6f6;border:2px solid transparent}
.result-card:hover img{border-color:#16aaff}.result-label{font-size:18px;font-weight:900;font-style:italic;line-height:1.05;text-align:center;margin-top:5px;overflow-wrap:anywhere}
.result-score{display:block;font-size:15px;text-transform:uppercase;color:#064f8b}.rank-badge{position:absolute;top:7px;left:7px;background:#111;color:#fff;padding:4px 7px;font-weight:800}
.image-wrap{position:relative}.best{outline:3px solid #1eb9ff;outline-offset:2px}.best:after{content:"Closest visual match";position:absolute;right:6px;top:6px;background:#0b78c9;color:#fff;padding:4px 6px;font-size:11px;font-weight:700}
.placeholder{display:flex;align-items:center;justify-content:center;text-align:center;min-height:165px;border:2px dashed #aaa;background:#e8e8e8;color:#666;font-weight:700;padding:18px}
.controls{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}.controls button{border:2px outset #eee;background:#d7d7d7;padding:7px 11px;font-weight:700;cursor:pointer}
@media(max-width:1150px){.matcher-layout{grid-template-columns:280px 1fr}.results-side{grid-column:1/-1;grid-template-columns:repeat(5,1fr)}}
@media(max-width:780px){.page{padding:18px 12px}.matcher-layout{grid-template-columns:1fr}.intro h1{font-size:29px;margin-bottom:17px}.intro p{font-size:21px}.scan-image,.scan-panel{height:400px;min-height:400px}.bottom-results,.results-side{grid-template-columns:repeat(2,1fr)}.topbar{flex-wrap:wrap;gap:8px}.archive-count{width:100%;order:3}}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition:none!important}}