body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:linear-gradient(135deg,#f8fafc,#f1f5f9);padding:0;text-align:center;margin:0;color:#1e293b;min-height:100vh}.brand-header{background:#fff;padding:30px 20px;border-bottom:1px solid #e2e8f0;margin-bottom:30px;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}.hero-image{max-width:320px;width:90%;height:auto;display:block;margin:0 auto;border-radius:12px}.container{padding:20px;max-width:500px;margin:0 auto}#scanner-container{background:#fff;padding:15px;border-radius:12px;margin-bottom:20px;box-shadow:0 4px 6px -1px #0000001a}#reader{width:100%;overflow:hidden;border-radius:8px;margin-bottom:10px}.card{background:#fff;margin:10px 0;border-radius:12px;box-shadow:0 2px 5px #0000001a;display:flex;align-items:center;justify-content:space-between;padding:5px;min-width:0;width:100%;box-sizing:border-box;overflow:hidden;transition:transform .2s,box-shadow .2s}.sortable-ghost{opacity:.4;background:#e2e8f0!important}.sortable-drag{opacity:.9;box-shadow:0 10px 15px -3px #0000001a;transform:scale(1.02)}.grab-handle{cursor:grab;padding:10px;color:#94a3b8;display:flex;align-items:center;justify-content:center;touch-action:none}.card-content{padding:10px 15px;flex:1;min-width:0;text-align:left;cursor:pointer;display:flex;flex-direction:column}.card-content small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.delete-btn{flex-shrink:0;background:#f44;color:#fff;border:none;padding:10px 16px;cursor:pointer;font-weight:700;border-radius:8px;margin:0 10px}.barcode-text{font-size:.85em;color:#666;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;width:100%}#detailView{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:#fff;flex-direction:column;justify-content:center;align-items:center;z-index:1000}#barcodeError{color:#f44;padding:20px;border:1px dashed #ff4444;margin:20px;border-radius:8px;background:#fff5f5}#barcode,#qrcode{margin-top:20px;max-width:90%}#qrcode{margin:0 auto;display:block;background:#fff;padding:10px;border-radius:4px}.btn{background:#6366f1;color:#fff;border:none;padding:12px 24px;border-radius:12px;cursor:pointer;margin:5px;font-weight:600;transition:background .2s ease,transform .1s ease}.btn:active{transform:scale(.98)}.btn:hover{background:#4f46e5}.flex{display:flex!important}.hidden{display:none!important}input{padding:14px;margin:8px auto;border-radius:10px;border:1px solid #e2e8f0;width:90%;max-width:320px;display:block;box-sizing:border-box;font-size:16px;outline:none;transition:border-color .2s}input:focus{border-color:#6366f1}.secondary-btn{background:#94a3b8;font-size:.9em;padding:10px 18px}.secondary-btn:hover{background:#64748b}hr{border:0;height:1px;background:#e2e8f0;margin:30px 0}