*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--black: #0a0a0a;--white: #f5f4f0;--cream: #ede9e0;--gold: #c9a84c;--gold-dim:#8a6e2f;--red: #c0392b;--green: #1a7a4a;--grey-1: #1c1c1c;--grey-2: #2e2e2e;--grey-3: #4a4a4a;--grey-4: #7a7a7a;--grey-5: #b0b0b0;--border: #2e2e2e;--font-display: "Syne", sans-serif;--font-mono: "DM Mono", monospace;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 16px;--shadow-card: 0 2px 12px rgba(0,0,0,.4);--shadow-pop: 0 8px 32px rgba(0,0,0,.6);--transition: .18s ease}html,body,#root{height:100%;background:var(--black);color:var(--white);font-family:var(--font-mono);font-size:15px;-webkit-font-smoothing:antialiased;overflow-x:hidden}.app-shell{min-height:100dvh;display:flex;flex-direction:column}.page{flex:1;padding:16px;max-width:680px;margin:0 auto;width:100%}.app-header{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--border);background:var(--grey-1);position:sticky;top:0;z-index:100}.app-header .logo{font-family:var(--font-display);font-weight:800;font-size:22px;letter-spacing:-.5px;color:var(--gold)}.app-header .subtitle{font-size:11px;color:var(--grey-4);letter-spacing:.08em;text-transform:uppercase}.header-actions{display:flex;gap:8px;align-items:center}.card{background:var(--grey-1);border:1px solid var(--border);border-radius:var(--radius-md);padding:16px;box-shadow:var(--shadow-card)}.card+.card{margin-top:12px}.card-label{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--grey-4);margin-bottom:6px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--font-mono);font-size:13px;font-weight:500;letter-spacing:.04em;border:none;border-radius:var(--radius-sm);padding:12px 20px;cursor:pointer;transition:all var(--transition);white-space:nowrap;text-decoration:none;-webkit-tap-highlight-color:transparent}.btn:active{transform:scale(.97)}.btn:disabled{opacity:.4;cursor:not-allowed;transform:none}.btn-primary{background:var(--gold);color:var(--black);font-weight:700}.btn-primary:hover:not(:disabled){background:#d4b060}.btn-secondary{background:var(--grey-2);color:var(--white);border:1px solid var(--border)}.btn-secondary:hover:not(:disabled){background:var(--grey-3)}.btn-danger{background:transparent;color:var(--red);border:1px solid var(--red)}.btn-danger:hover:not(:disabled){background:var(--red);color:var(--white)}.btn-ghost{background:transparent;color:var(--grey-4);border:1px solid var(--border)}.btn-ghost:hover:not(:disabled){color:var(--white);border-color:var(--grey-3)}.btn-lg{padding:16px 28px;font-size:15px;border-radius:var(--radius-md)}.btn-full{width:100%}.btn-icon{padding:10px}.input-wrap{display:flex;flex-direction:column;gap:6px}.input-label{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--grey-4)}.input{background:var(--grey-2);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--white);font-family:var(--font-mono);font-size:16px;padding:14px 16px;outline:none;transition:border-color var(--transition);width:100%}.input:focus{border-color:var(--gold)}.input::placeholder{color:var(--grey-3)}.input-lg{font-size:20px;padding:16px;letter-spacing:.05em}.badge{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding:3px 8px;border-radius:99px}.badge-pending{background:#c9a84c26;color:var(--gold);border:1px solid var(--gold-dim)}.badge-fulfilled{background:#1a7a4a26;color:#2ecc71;border:1px solid #1a7a4a}.badge-partial{background:#c0392b26;color:#e74c3c;border:1px solid var(--red)}.badge-revised{background:#3498db26;color:#3498db;border:1px solid #1a5276}.data-table{width:100%;border-collapse:collapse;font-size:13px}.data-table th{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--grey-4);padding:8px 12px;text-align:left;border-bottom:1px solid var(--border)}.data-table td{padding:12px;border-bottom:1px solid rgba(46,46,46,.6);vertical-align:middle}.data-table tr:last-child td{border-bottom:none}.data-table tr:hover td{background:#ffffff05}.order-item{display:grid;grid-template-columns:1fr auto auto;gap:12px;align-items:center;padding:14px 0;border-bottom:1px solid var(--border)}.order-item:last-child{border-bottom:none}.order-item-name{font-family:var(--font-display);font-size:14px;font-weight:600;line-height:1.3}.order-item-meta{font-size:11px;color:var(--grey-4);margin-top:2px;letter-spacing:.03em}.qty-control{display:flex;align-items:center;gap:0;background:var(--grey-2);border:1px solid var(--border);border-radius:var(--radius-sm);overflow:hidden}.qty-btn{width:40px;height:40px;background:none;border:none;color:var(--gold);font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background var(--transition);-webkit-tap-highlight-color:transparent}.qty-btn:active{background:var(--grey-3)}.qty-display{min-width:40px;text-align:center;font-size:16px;font-weight:500;color:var(--white);padding:0 4px}.qty-input-field{width:60px;text-align:center;background:none;border:none;color:var(--white);font-family:var(--font-mono);font-size:16px;font-weight:500;padding:8px 4px;outline:none}.scanner-wrap{position:relative;width:100%;aspect-ratio:1 / 1;max-height:320px;background:var(--black);border-radius:var(--radius-md);overflow:hidden;border:1px solid var(--border)}.scanner-wrap video{width:100%;height:100%;object-fit:cover}.scanner-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;pointer-events:none}.scanner-frame{width:65%;aspect-ratio:3/1.2;border:2px solid var(--gold);border-radius:4px;box-shadow:0 0 0 2000px #00000073;position:relative}.scanner-line{position:absolute;left:4px;right:4px;height:2px;background:var(--gold);top:50%;animation:scan 2s ease-in-out infinite;box-shadow:0 0 8px var(--gold)}@keyframes scan{0%,to{top:15%}50%{top:85%}}.product-found{animation:slideUp .22s ease}@keyframes slideUp{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}.toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%);background:var(--grey-1);border:1px solid var(--border);border-radius:var(--radius-md);padding:12px 20px;font-size:13px;box-shadow:var(--shadow-pop);z-index:9999;white-space:nowrap;animation:toastIn .2s ease;display:flex;align-items:center;gap:8px}.toast-success{border-color:var(--green);color:#2ecc71}.toast-error{border-color:var(--red);color:#e74c3c}.toast-info{border-color:var(--gold);color:var(--gold)}@keyframes toastIn{0%{opacity:0;transform:translate(-50%) translateY(12px)}to{opacity:1;transform:translate(-50%) translateY(0)}}.pin-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;max-width:280px;margin:0 auto}.pin-key{aspect-ratio:1;background:var(--grey-2);border:1px solid var(--border);border-radius:var(--radius-md);font-family:var(--font-display);font-size:24px;font-weight:700;color:var(--white);cursor:pointer;transition:all var(--transition);display:flex;align-items:center;justify-content:center;-webkit-tap-highlight-color:transparent}.pin-key:active{background:var(--grey-3);transform:scale(.93)}.pin-dots{display:flex;gap:12px;justify-content:center;margin:20px 0}.pin-dot{width:14px;height:14px;border-radius:50%;border:2px solid var(--grey-3);transition:all .15s ease}.pin-dot.filled{background:var(--gold);border-color:var(--gold);box-shadow:0 0 8px #c9a84c66}.empty-state{text-align:center;padding:48px 24px;color:var(--grey-4)}.empty-state-icon{font-size:48px;margin-bottom:12px;opacity:.4}.empty-state-title{font-family:var(--font-display);font-size:18px;font-weight:700;color:var(--grey-3);margin-bottom:6px}.section-title{font-family:var(--font-display);font-size:20px;font-weight:700;margin-bottom:16px;display:flex;align-items:center;gap:10px}.section-title span{font-size:11px;font-family:var(--font-mono);font-weight:400;color:var(--grey-4);letter-spacing:.08em;text-transform:uppercase}.divider{height:1px;background:var(--border);margin:16px 0}.fulfill-row{display:grid;grid-template-columns:1fr 100px 100px;gap:8px;align-items:center;padding:12px 0;border-bottom:1px solid rgba(46,46,46,.5);font-size:13px}.fulfill-row:last-child{border-bottom:none}.fulfill-row-name{font-family:var(--font-display);font-weight:600;font-size:13px;line-height:1.3}.fulfill-row-meta{font-size:10px;color:var(--grey-4);margin-top:2px}.fulfill-col-header{font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--grey-4);text-align:center}.fulfill-requested{text-align:center;font-size:18px;font-weight:700;color:var(--grey-5)}.order-card{background:var(--grey-1);border:1px solid var(--border);border-radius:var(--radius-md);padding:16px;margin-bottom:10px;cursor:pointer;transition:border-color var(--transition)}.order-card:hover{border-color:var(--gold-dim)}.order-card:active{transform:scale(.99)}.order-card-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:8px}.order-ref{font-family:var(--font-display);font-size:16px;font-weight:700}.order-meta{font-size:11px;color:var(--grey-4);margin-top:2px}.spinner{width:20px;height:20px;border:2px solid var(--grey-3);border-top-color:var(--gold);border-radius:50%;animation:spin .6s linear infinite;display:inline-block}@keyframes spin{to{transform:rotate(360deg)}}.text-gold{color:var(--gold)}.text-red{color:var(--red)}.text-green{color:var(--green)}.text-muted{color:var(--grey-4)}.text-mono{font-family:var(--font-mono)}.text-center{text-align:center}.text-sm{font-size:12px}.text-xs{font-size:10px}.mt-8{margin-top:8px}.mt-12{margin-top:12px}.mt-16{margin-top:16px}.mt-24{margin-top:24px}.mb-8{margin-bottom:8px}.mb-12{margin-bottom:12px}.mb-16{margin-bottom:16px}.gap-8{gap:8px}.gap-12{gap:12px}.flex{display:flex}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-between{justify-content:space-between}.w-full{width:100%}