@import "https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:wght@400;500;600;700&display=swap";:root{color:#252423;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;background:#f1eee8;font-family:DM Sans,Segoe UI,sans-serif}*{box-sizing:border-box}body{min-width:320px;margin:0}button,input{font:inherit}.app-shell{--ink:#252423;--muted:#77736c;--line:#d8d3ca;--paper:#fffefa;--orange:#ee4b20;--green:#42954c;--red:#c64136;min-height:100vh;color:var(--ink);background:#f5f3ef}.topbar,.search-panel,.order-content{width:min(1160px,100% - 80px);margin-inline:auto}.topbar{border-bottom:1px solid var(--line);letter-spacing:.08em;text-transform:uppercase;justify-content:space-between;align-items:center;height:60px;font-size:12px;display:flex}.brand{align-items:center;gap:9px;font-weight:800;display:flex}.brand-mark{color:#fff;background:var(--orange);letter-spacing:0;border-radius:50%;place-items:center;width:26px;height:26px;font-size:8px;display:grid}.workspace-label{color:var(--muted);font-size:10px}.search-panel{background:var(--paper);border:1px solid var(--line);border-radius:7px;margin-top:18px;padding:14px 18px 16px}.search-panel label,.summary-label,.confirm-card>label,.item-facts span,.verified-quantity span{color:var(--muted);letter-spacing:.13em;text-transform:uppercase;font-size:10px;font-weight:800;display:block}.search-row{gap:10px;margin-top:8px;display:flex}.input-wrap{border:1px solid var(--line);background:#fff;border-radius:5px;flex:1;align-items:center;gap:10px;height:42px;padding:0 13px;display:flex}.input-wrap svg{color:var(--muted)}.input-wrap input{width:100%;color:var(--ink);background:0 0;border:0;outline:0;font-family:DM Mono,monospace;font-size:14px}.search-row button,.confirm-button{background:var(--orange);color:#fff;cursor:pointer;border:0;justify-content:center;align-items:center;gap:8px;font-weight:700;display:flex}.search-row button{border-radius:4px;min-width:120px;height:42px;padding:0 17px;font-size:12px}.search-row button:disabled{opacity:.65;cursor:wait}.spin{animation:1s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.error-banner{color:#9b2d22;background:#fbe8e1;border:1px solid #efc4b7;border-radius:5px;align-items:center;gap:8px;width:min(1160px,100% - 80px);margin:12px auto 0;padding:10px 13px;font-size:12px;display:flex}.order-content{padding:28px 0 38px}.order-heading,.items-heading{justify-content:space-between;align-items:end;display:flex}.eyebrow{color:var(--orange);letter-spacing:.14em;text-transform:uppercase;margin:0 0 5px;font-size:10px;font-weight:800}.order-title-row{align-items:center;gap:12px;display:flex}.order-heading h1,.items-heading h2{letter-spacing:-.04em;margin:0;font-family:DM Sans,sans-serif;font-size:28px}.status-pill{color:var(--green);background:#e3f3e4;border-radius:5px;align-items:center;gap:7px;padding:5px 9px;font-size:10px;font-weight:700;display:flex}.status-pill span{background:#5eae65;border-radius:50%;width:6px;height:6px}.quiet-button{color:var(--muted);cursor:pointer;background:0 0;border:0;align-items:center;gap:6px;padding:7px 0;font-size:11px;display:flex}.summary-grid{border-block:1px solid var(--line);grid-template-columns:repeat(4,1fr);gap:18px;margin:18px 0 30px;padding:14px 0;display:grid}.summary-label{margin-bottom:5px}.summary-grid strong{font-size:13px}.summary-grid small{color:var(--muted);font-weight:400}.items-heading{margin-bottom:10px}.item-count{color:var(--muted);font-size:11px}.items-list{gap:12px;display:grid}.item-card{background:var(--paper);border:1px solid var(--line);border-radius:7px;grid-template-columns:minmax(0,1fr) 380px;gap:14px;padding:14px;display:grid}.item-main{min-width:0}.image-strip{grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;display:grid}.image-thumb{border:1px solid var(--line);cursor:pointer;background:#eeece8;border-radius:5px;place-items:center;width:100%;height:180px;padding:0;display:grid;position:relative;overflow:hidden}.image-thumb.active{border:2px solid var(--orange)}.image-thumb img{object-fit:contain;mix-blend-mode:multiply;width:100%;height:100%}.image-thumb>span{color:var(--muted);place-items:center;display:grid;position:absolute}.image-thumb img+span{opacity:0}.item-details{min-width:0;padding:15px 3px 0}.item-index{color:var(--orange);letter-spacing:.12em;font-size:9px;font-weight:800}.item-details h3{letter-spacing:-.025em;max-width:680px;margin:5px 0 12px;font-size:22px;line-height:1.2}.pick-keys{flex-wrap:wrap;gap:8px;margin:8px 0 12px;display:flex}.pick-keys div{background:var(--ink);color:#fff;border-radius:4px;align-items:baseline;gap:8px;padding:7px 10px;display:flex}.pick-keys div:last-child{background:var(--orange)}.pick-keys span,.item-facts span{letter-spacing:.11em;text-transform:uppercase;opacity:.7;font-size:9px;font-weight:800}.pick-keys strong{font-family:DM Mono,monospace;font-size:16px}.item-facts{border-top:1px solid var(--line);gap:22px;padding-top:11px;display:flex}.item-facts div{gap:4px;display:grid}.item-facts code,.item-facts strong{font-family:DM Mono,monospace;font-size:12px}.image-url{color:var(--orange);margin-top:12px;font-size:11px;text-decoration:none;display:inline-flex}.image-url:hover{text-decoration:underline}.confirm-card{border:1px solid var(--line);background:#fff;border-radius:6px;flex-direction:column;align-self:stretch;padding:20px;display:flex}.confirm-heading{align-items:flex-start;gap:12px;margin-bottom:20px;display:flex}.confirm-heading>svg{color:var(--orange);flex:none}.confirm-heading h3{margin:0 0 5px;font-size:17px}.confirm-heading p{color:var(--muted);margin:0;font-size:12px;line-height:1.4}.confirm-card>label{margin-bottom:7px}.scan-input{background:#fff;border:1px solid #bdb8b0;border-radius:5px;align-items:center;gap:10px;height:58px;padding:0 14px;display:flex}.scan-input svg{color:var(--orange)}.scan-input input{background:0 0;border:0;outline:0;width:100%;font-family:DM Mono,monospace;font-size:18px}.confirm-button{border-radius:4px;height:48px;margin-top:10px;font-size:13px}.inline-result{border:1px solid;border-radius:5px;align-items:center;gap:8px;margin:14px 0 0;padding:12px;font-size:12px;font-weight:700;display:flex}.confirm-card.matched .inline-result{color:var(--green);background:#ecf8ed;border-color:#a4d3a8}.confirm-card.mismatch .inline-result,.confirm-card.unavailable .inline-result{color:var(--red);background:#fff0ed;border-color:#e7aaa3}.verified-quantity{border-top:1px solid var(--line);justify-content:space-between;margin-top:auto;padding-top:17px;display:flex}.verified-quantity strong{font-family:DM Mono,monospace;font-size:13px}.empty-state{text-align:center;color:var(--muted);padding:70px 20px}.empty-state svg{color:var(--orange)}.empty-state h2{color:var(--ink);margin:12px 0 3px;font-size:24px}.empty-state p{margin:0;font-size:13px}.modal-backdrop{z-index:20;background:#25242385;place-items:center;padding:20px;display:grid;position:fixed;inset:0}.scan-modal{text-align:center;background:#fff;border-radius:10px;width:min(420px,100%);padding:38px 30px 28px;position:relative;box-shadow:0 20px 60px #2524234d}.modal-close{width:32px;height:32px;color:var(--muted);cursor:pointer;background:#f1eee8;border:0;border-radius:50%;place-items:center;display:grid;position:absolute;top:12px;right:12px}.result-icon{border-radius:50%;place-items:center;width:112px;height:112px;margin:0 auto 18px;display:grid}.scan-modal.success .result-icon{color:#fff;background:var(--green)}.scan-modal.failure .result-icon{color:#fff;background:var(--red)}.modal-kicker{color:var(--muted);margin:0 0 7px;font-family:DM Mono,monospace;font-size:11px}.scan-modal h2{margin:0 0 9px;font-size:25px}.scan-modal>p:not(.modal-kicker){color:var(--muted);margin:0 auto 20px;font-size:13px}.modal-action{background:var(--ink);color:#fff;cursor:pointer;border:0;border-radius:4px;min-width:120px;height:38px;font-weight:700}.modal-hint{color:var(--muted);margin-top:14px;font-size:10px;display:block}@media (width<=800px){.topbar,.search-panel,.order-content,.error-banner{width:calc(100% - 32px)}.item-card{grid-template-columns:1fr}.confirm-card{min-height:320px}.image-thumb{height:120px}.summary-grid{grid-template-columns:repeat(2,1fr);gap:15px 10px}.order-heading h1{font-size:24px}}@media (width<=500px){.search-row{flex-direction:column}.search-row button{width:100%}.image-strip{grid-template-columns:repeat(3,1fr)}.image-thumb{height:100px}.item-facts{flex-wrap:wrap;gap:12px}.item-details h3{font-size:19px}}
